Как добавить... |
Волшебные кнопки |
...в вашу
страницу. |
Мы собираемся обучить Вас, как делать Волшебные Кнопки! Хотя это выполнено с помощью 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">
</BODY>
</HTML>