 |
Допустим, Вы уже сделали две кнопки. Теперь Вы хотите, чтобы картинки сменяли друг друга, да не просто так, а при наведении мыши. Сделать это не трудно.
Для
начала надо вставить в тег <Body>
вот такой скрипт:
<SCRIPT LANGUAGE="JavaScript">
if( parseInt( navigator.appVersion ) >= 3 ) compat = true;
if(compat)
{
I1 = new Image;
I1.src="i1.gif"(просто кнопка);
I1_1 = new Image;
I1_1.src="i2.gif"(кнопка при
наведении);
}
function SetImg(Name,Img)
{
if(compat)
{
document.images[Name].src=eval(Img+'.src');
}
}
</SCRIPT>
Затем в
том месте, где предполагается
вставить кнопку, напишите такой
код:
<A HREF="index.html" target="_self" ONMOUSEOVER="SetImg('PIC1','I1_1')" ONMOUSEOUT="SetImg('PIC1','I1')"><IMG SRC="i1.gif"(т.е. простая кнопка) alt="домой" NAME="PIC1" BORDER=0></A>
Если предполагается создание целой
менюшки из таких кнопок, то сам
скрипт надо немного доработать.
Например, для двух разных
нажимающихся кнопок он будет
выглядеть вот так:
<SCRIPT
LANGUAGE="JavaScript">
if( parseInt( navigator.appVersion ) >= 3 ) compat = true;
if(compat)
{
I1 = new Image;
I1.src="i1.gif"(просто кнопка);
I1_1 = new Image;
I1_1.src="i2.gif"(кнопка при
наведении);
I2 = new Image;
I2.src="i3.gif"(просто кнопка-2);
I2_1 = new Image;
I2_1.src="i4.gif"(кнопка при
наведении-2);
}
function SetImg(Name,Img)
{
if(compat)
{
document.images[Name].src=eval(Img+'.src');
}
}
</SCRIPT>
Все, что выделено бледным курсивом,
добавлено. То есть Вы считаете,
сколько кнопок будет на странице, и
для каждой из них повторяете этот
кусок кода, соответственно меняя
названия. I№ - номер Вашей
кнопки; I№_1 - номер Вашей
нажатой кнопки. Каждую картинку
сперва надо ввести, то есть
написать I№ = new image;, затем
для каждой картинки надо указать ее
адрес: I№.src =
"адрес/название.gif";. Затем
непосредственно при введении
кнопки на страницу надо написать в ONMOUSEOVER,
что оно равняется "SetImg('PIC№','I№_1')",
а в ONMOUSEOUT, что оно равно "SetImg('PIC№','I№')".
В параметре NAME тоже надо
указать "PIC№".
О создании кнопки из примера рассказано в главе "эллиптическая анимированная кнопка", а еще одну анимированную кнопку Вы увидите в главе "вытянутая анимированная кнопка". Если же Вас не устраивает этот скрипт или Вы хотите сделать интерактивной кнопку из одного кадра, то советую Вам почитать про "всплывающую кнопку".
