Читайте также:
|
Можно заменить одно изображение другим при наведении на него указателя мыши, а при отведении указателя вернуть старое изображение. Этот эффект обычно применяется к изображениям с функциями гиперссылок, хотя его можно применить и к любому другому изображению.
<html>
<head>
<title> Смена изображения под указателем мыши </title>
<script language="javascript">
img1 = new Image;
img2 = new Image;
img1.src = "img1.gif";
img2.src = "img2.gif";
</script>
</head>
<body>
<a href="moveon.htm"
onMouseover = "document.imgSwap.src = img2.src"
onMouseout = "document.imgSwap.src = img1.src">
<img src="img1.gif" name="imgSwap" border="0">
</a>
</body>
</html>
Упражнение. Создайте гиперссылку в виде изображения, которое при наведении указателя мыши обводится рамкой, а при отведении рамка исчезает. (Присваивайте свойству border, соответственно, ненулевое значение или нуль.)
Переливающийся текст
В этом сценарии мы создадим гиперссылку, переливающуюся разными цветами. Для этого создадим массив цветов colors, в который заносятся все названия цветов, которыми будет переливаться ссылка. Заведём переменную mylinkcolor, в которой будет храниться текущий номер цвета ссылки. Затем напишем функцию linkcolorchange(), которая изменяет значение этой переменной и присваивает соответствующий цвет из массива нашей гиперссылке. По истечении заданного промежутка времени функция вызывает сама себя, чтобы придать ссылке следующий цвет.
<html>
<head>
<script language="JavaScript">
var colors = new Array(
"red", "orange", "yellow", "green", "aqua", "blue", "magenta");
var mylinkcolor = 0;
function linkcolorchange()
{
mylinkcolor = mylinkcolor+1;
if (mylinkcolor == colors.length) mylinkcolor = 0;
id1.style.color = colors[mylinkcolor];
setTimeout("linkcolorchange();", 200);
}
</script>
</head>
<body onLoad="linkcolorchange()">
<a id="id1" href="mypage.html">мерцающая ссылка</a>
</body>
</html>
Упражнение. Создайте гиперссылку, переливающуюся только при наведении на неё указателя мыши. (Указание. Создайте функцию для возврата цвета ссылки в исходное состояние и вызывайте созданные функции по событиям onMouseOver и onMouseOut.)
Литература
1. Вильямсон Х. Универсальный Dynamic HTML. Библиотека программиста. – СПб.: Питер, 2001.
2. Дронов В. А. Macromedia Dreamweaver MX 2004 в подлиннике. – СПб.: БХВ-Петербург, 2005.
3. Кингсли-Хью Э., Кингсли-Хью К. JavaScript 1.5: учебный курс. – СПб.: Питер, 2001.
4. Мак-Федрис П. Использование JavaScript. Специальное издание.: Пер. с англ. – М.: Издательский дом «Вильямс», 2002.
5. Матросов А. В., Сергеев А. О., Чаунин М. П. HTML 4.0 в подлиннике. – СПб.: БХВ-Петербург, 2005.
6. Мержанова М. Уроки веб-мастерства. // Мир ПК. – 2003. – № 2 – 4, 7. – 2004. – № 5, 6.
7. Прохорский Г. В. Как сделать свою веб-страницу или сайт с помощью Microsoft FrontPage 2003. – М.: НТ Пресс, 2005.
8. Шапошников И. В. Самоучитель HTML. – СПб.: БХВ-Петербург, 2005.
Дата добавления: 2015-07-26; просмотров: 97 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Движущийся текст | | | Приложение 3. Часто используемые свойства стилевых таблиц |