Важное понять здесь то, что мы можем НАЗЫВАТЬ (или маркировать) расположение изображения. Мы использовали imgXX как метку..
Если мы должны переключать это...
на это...
...мы получим полностью различные эффекты.
Фактически, при использовании этого метода, Вы можете вызывать эффекты в любом изображении (ях) из любого другого изображения (й). Все сохраняется непосредственно переменными. Есть другой пример. Он идентичен последнему, за исключением того, что он также активизирует третье изображение.
И есть код...
<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">
<IMG NAME="img03" SRC="camera_1.gif" width=42 height=44 border=0>
</BODY>
</HTML>
Как Вы можете видеть, предложенная методика имеет широкие возможностей. Вы можете помещать эти кнопки в таблицу или внедрять их в форму. Наиболее важная проблема - корректное сохранение переменных.
Теперь мы коснемся нескольких основных стилей кнопок. Первое - простое цветное изменение. Все, что мы делаем, подсвечивание активной кнопки.
* Все изображения кнопок можно захватить внизу
этой страницы.
Эта методика делает кнопку "pop up".
А это истинная кнопка. Второе изображение сделано, перемещением содержания первого изображения на одни пиксель ниже и на один пиксель вправо, и изменяя немного края обращения Вы можете это легко выполнить (как только Вы приобретаете навык) в любом графическом редакторе.
Вы можете поместить их в таблицу для эффекта изящной кнопочной панели.
![]() |
![]() |
![]() |
Имеется еще одна вещь, которую мы можем добавлять. Это - функция "onClick" . В дополнение к подсвечиванию кнопки, когда курсор находится над ней, Вы можете заставить кнопку углубляться, когда кто - то нажимает на нее. Есть пример и код.
Пара Примечаний:
1- Не забывайте добавлять наполнение в метки
2- Мы переместили этот код из этой страницы, так что ссылки imgXX и адресат
отражаются что-то.
3- является кодом для пробела. Мы использовали его,
чтобы отделить немного кнопки друг от друга.
Это - другой эффект, который Вы можете сделать. Перемещение курсора над каждой из связей перемещает маркер в ту связь. Это - пример mouseOver, который изменяет второе изображение ... очень подобный эффекту с камерой. Вещь полностью закрепляется в таблице. Маркер эффекта состоит из 2 изображений, ромба и пустого белого прямоугольника того же самого размера. Меню справа - то же самое, но со включенными рамками таблицы. Если Вам необходима раскраска HTML таблиц, тогда загляните на Таблица.
|
|
Вот и все о Волшебных Кнопках. Мы рекомендуем взглянуть на JavaScript resources , чтобы получше познакомиться JavaScript.
Ниже показаны все кнопки, использованные в примерах.
![]() ![]() |
![]() |
![]() |
![]() |
![]() |
--> | ![]() |
<-- (не забывайте пустое изображение) |