Как добавить...
     Волшебные кнопки
...в вашу страницу. 

Мы собираемся обучить Вас, как делать Волшебные Кнопки! Хотя это выполнено с помощью JavaScript, мы не будем давать детальные объяснения включаемого кода. Мы дадим Вам некоторые основные команды. Если Вы хотите узнать механику JavaScript, мы рекомендуем посетить Java & JavaScript resources page.

Еще одно примечание ... Microsoft Internet Explorer не поддерживает JavaScript, представленный здесь. Так как создание сценария вызывает сообщения об ошибках в Explorer, мы добавили фильтр, который ищет Netscape Навигатора. Если ваш браузер не Netscape, Вы не будете видеть специальные эффекты.

Это - связь. Если Вы нажимаете на ней, Вы будете направлены на другую страницу.

Идея этого проста. Внутри html документа - сценарий. Этот сценарий указывает браузеру, выполнить что-то. В предыдущем примере сценарий говорит:

1. Загрузить и отобразить это изображение -

2. Когда курсор помещается над этим изображением, немедленно заменить его на это изображение -

3. Когда курсор уходит от изображения, заменить его на первоначальное изображение -

4. Если произведен щелчок на изображении, Вы будете перенаправлены на другую страницу.

5. Повторить по мере необходимости.


Теперь сформируем этот эффект постепенно, шаг за шагом.

Запустите Notepad и разместите его новое окно Netscape рядом. (В качестве альтернативе Notepad, можно рекомендовать EditPad.

Начните с этого:

<HTML>

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

<BODY BGCOLOR="#FFFFFF">
</BODY>

</HTML>

Сохраните это как magic.html в новой папке (пользователи Windows 3.x сохраняют как magic.htm)


Затем вам потребуется пара изображений. Сохраните это изображение как clickme1.gif и это как clickme2.gif.

Самое время создать целевой документ...

<HTML>

<HEAD>
<TITLE>Magic Buttons Target</TITLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF">

<H1 ALIGN=center>* TARGET *</H1>

</BODY>

</HTML>

Сохраните это как target.html

Вы должны теперь иметь папку с четырьмя элементами в ней: magic.html, target.html, clickme1.gif и clickme2.gif.


Вновь откройте magic.html и добавьте следующее ...

<HTML>

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

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

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

</HEAD>

<BODY BGCOLOR="#FFFFFF">
</BODY>

</HTML>

Обратите внимание, что это идет внутри метки <HEAD> , а не в метках <BODY>.


Затем вставьте фильтр браузера.

<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}

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

</HEAD>

<BODY BGCOLOR="#FFFFFF">
</BODY>

</HTML>

Этот текст говорит - Если браузер - Netscape Navigator, используйте следующий сценарий. Если браузер - не Navigator, игнорируйте сценарий.


Затем, добавьте следующее. Зеленый и синий тексты - это вещи, которые Вы встраиваете. Зеленый - для имени и размерностей первого изображения, а синий - для имени и размерностей второго изображения. Размерности - это ширина и высота (width,height).

<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";

}

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

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

</HEAD>

<BODY BGCOLOR="#FFFFFF">
</BODY>

</HTML>

Мы выполнили создание сценария в метке <HEAD>.


Теперь мы запишем метку <IMG>. Обратите внимание IMG NAME в фиолетовом цвете. Каждое пятно, в которое мы помещаем изображение, нуждается в уникальном имени (или метке) так, когда сценарий начинает переключать изображения, он знает точно какое изображение поместить где. Для этого примера img01 будет делать только прекрасно. Также встраивается имя первого изображения и его размерности.

<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";

}

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

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

</HEAD>

<BODY BGCOLOR="#FFFFFF">

<IMG NAME="img01" SRC="clickme1.gif" width=75 height=22 border=0>

</BODY>

</HTML>

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


Теперь добавьте информацию связи и немного больше JavaScript.

<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";

}

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('img01','clickme2')" onMouseOut="hiLite('img01','clickme1')"><IMG NAME="img01" SRC="clickme1.gif" width=75 height=22 border=0></A>

</BODY>

</HTML>


Создание более одной кнопки немного сложнее. Не требуется много, чтобы сгенерировать известные JavaScript Сообщения об ошибках JavaScript Error.

Следующие переменные мы использовали к настоящему времени:

clickme1  - оригинальное изображение
clickme2  - заменяющее изображение
img01  - метка изображения
target.html  - целевой документ

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

clickme3  -  второе оригинальное изображение
clickme4  -  второе заменяющее изображение
img02  -  метка второго изображения
target2.html  -  второй целевой документ

Сохраните следующее как target2.htm

<HTML>

<HEAD>
<TITLE>Magic Buttons Target</TITLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF">

<H1 ALIGN=center>* TARGET TOO! *</H1>

</BODY>

</HTML>


Добавьте переменные операторы сценария в метке <HEAD> .

<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";

}

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

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

</HEAD>

<BODY BGCOLOR="#FFFFFF">

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

</BODY>

</HTML>


Теперь поместите начальное изображение.

<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";

}

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

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

</HEAD>

<BODY BGCOLOR="#FFFFFF">

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

<IMG NAME="img02" SRC="clickme3.gif" width=102 height=22 border=0>

</BODY>

</HTML>


Теперь добавьте информацию связи и команды JavaScript.

<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";

}

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

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

</HEAD>

<BODY BGCOLOR="#FFFFFF">

<A HREF="target.htm" 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>

</BODY>

</HTML>


Имеется та же самая страница со всеми вставными высвеченными переменными. Мы заключили пару строк в метки <NOBR> (nobreak) для удобства чтения.

<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";

}

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('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>

</BODY>

</HTML>

Далее...


Таблицы, Формы и Итак, Вы хотите построить Web Страницу!