Важное понять здесь то, что мы можем НАЗЫВАТЬ (или маркировать) расположение изображения. Мы использовали imgXX как метку..

Если мы должны переключать это...

<A HREF="target.html" onMouseOver="hiLite('img01','clickme2')" onMouseOut="hiLite('img01','clickme1')"><IMG NAME="img01" SRC="clickme1.gif" width=75 height=22 border=0></A>

<A HREF="target2.html" onMouseOver="hiLite('img02','clickme4')" onMouseOut="hiLite('img02','clickme3')"><IMG NAME="img02" SRC="clickme3.gif" width=102 height=22 border=0></A>

на это...

<A HREF="target.html" onMouseOver="hiLite('img02','clickme4')" onMouseOut="hiLite('img02','clickme3')"><IMG NAME="img01" SRC="clickme1.gif" width=75 height=22 border=0></A>

<A HREF="target2.html" onMouseOver="hiLite('img01','clickme2')" onMouseOut="hiLite('img01','clickme1')"><IMG NAME="img02" SRC="clickme3.gif" width=102 height=22 border=0></A>

...мы получим полностью различные эффекты.

Фактически, при использовании этого метода, Вы можете вызывать эффекты в любом изображении (ях) из любого другого изображения (й). Все сохраняется непосредственно переменными. Есть другой пример. Он идентичен последнему, за исключением того, что он также активизирует третье изображение.

И есть код...

<HTML>

<HEAD>
<TITLE>Magic Buttons!</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers

// browser test:
agent = navigator.userAgent
browserVer = 2
if (agent.indexOf("a/3",6) == -1) {browserVer = 2}
else {browserVer = 1}

// preload images:
if (browserVer == 1) {

clickme1 = new Image(75,22);
clickme1.src = "clickme1.gif";

clickme2 = new Image(75,22);
clickme2.src = "clickme2.gif";

clickme3 = new Image(102,22);
clickme3.src = "clickme3.gif";

clickme4 = new Image(102,22);
clickme4.src = "clickme4.gif";

camera_1 = new Image(42,44);
camera_1.src = "camera_1.gif";

camera_2 = new Image(42,44);
camera_2.src = "camera_2.gif";

}

function hiLite(imgDocID,imgObjName) {
if (browserVer == 1) {
document.images[imgDocID].src = eval(imgObjName + ".src")
}}

// end hiding --->
</SCRIPT>

</HEAD>

<BODY BGCOLOR="#FFFFFF">

<A HREF="target.html" onMouseOver="hiLite('img02','clickme4');hiLite('img03','camera_2')" onMouseOut="hiLite('img02','clickme3');hiLite('img03','camera_1')"><IMG NAME="img01" SRC="clickme1.gif" width=75 height=22 border=0></A>

<A HREF="target2.html" onMouseOver="hiLite('img01','clickme2');hiLite('img03','camera_2')" onMouseOut="hiLite('img01','clickme1');hiLite('img03','camera_1')"><IMG NAME="img02" SRC="clickme3.gif" width=102 height=22 border=0></A>

<IMG NAME="img03" SRC="camera_1.gif" width=42 height=44 border=0>

</BODY>

</HTML>

Как Вы можете видеть, предложенная методика имеет широкие возможностей. Вы можете помещать эти кнопки в таблицу или внедрять их в форму. Наиболее важная проблема - корректное сохранение переменных.


Теперь мы коснемся нескольких основных стилей кнопок. Первое - простое цветное изменение. Все, что мы делаем, подсвечивание активной кнопки.

        * Все изображения кнопок можно захватить внизу этой страницы.

Эта методика делает кнопку "pop up".

       

А это истинная кнопка. Второе изображение сделано, перемещением содержания первого изображения на одни пиксель ниже и на один пиксель вправо, и изменяя немного края обращения Вы можете это легко выполнить (как только Вы приобретаете навык) в любом графическом редакторе.

       

Вы можете поместить их в таблицу для эффекта изящной кнопочной панели.

Имеется еще одна вещь, которую мы можем добавлять. Это - функция "onClick" . В дополнение к подсвечиванию кнопки, когда курсор находится над ней, Вы можете заставить кнопку углубляться, когда кто - то нажимает на нее. Есть пример и код.

       

<A HREF="examples/target.html" onMouseOver="hiLite('img10','cbutton4')" onMouseOut="hiLite('img10','cbutton1')" onClick="hiLite('img10','cbutton7')"><IMG NAME="img10" SRC="cbutton1.gif" width=116 height=36 border=0></A>
&nbsp;&nbsp;&nbsp;
<A HREF="examples/target.html" onMouseOver="hiLite('img11','cbutton5')" onMouseOut="hiLite('img11','cbutton2')" onClick="hiLite('img11','cbutton8')"><IMG NAME="img11" SRC="cbutton2.gif" width=116 height=36 border=0></A>
&nbsp;&nbsp;&nbsp;
<A HREF="examples/target.html" onMouseOver="hiLite('img12','cbutton6')" onMouseOut="hiLite('img12','cbutton3')" onClick="hiLite('img12','cbutton9')"><IMG NAME="img12" SRC="cbutton3.gif" width=116 height=36 border=0></A>

Пара Примечаний:

             


Вот и все о Волшебных Кнопках. Мы рекомендуем взглянуть на JavaScript resources , чтобы получше познакомиться JavaScript.

Ниже показаны все кнопки, использованные в примерах.














--> <-- (не забывайте пустое изображение)
Таблицы, Формы и Итак, Вы хотите построить Web Страницу!