Студопедия
Случайная страница | ТОМ-1 | ТОМ-2 | ТОМ-3
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатика
ИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханика
ОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторика
СоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансы
ХимияЧерчениеЭкологияЭкономикаЭлектроника

Смена изображения под указателем мыши

Читайте также:
  1. II смена (16.08.13-26.08.13) до 10 апреля 2013
  2. Аптека коневладельца-спортсмена.
  3. Беларусь представляли 64 спортсмена в 9 видах спорта. Завоевана 1 бронзовая медаль.
  4. В случае неявки спортсмена на татами, после объявления его фамилии в течение 30 секунд, ему засчитывается поражение.
  5. Включение и выключение изображения сетки
  6. Вначале познакомимся с изображениями, называемыми сечениями.
  7. Год 1917-й - смена политических режимов.

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

<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 | Нарушение авторских прав


Читайте в этой же книге: Вставка изображений на веб-страницу | Изменение шрифта | Вставка специальных символов в HTML-документ | Таблицы в HTML | Синтаксис таблиц стилей | Приоритет применения таблиц стилей | Свободно позиционируемые элементы | Простейшие сценарии JavaScript | Операторы цикла | Использование объекта Date |
<== предыдущая страница | следующая страница ==>
Движущийся текст| Приложение 3. Часто используемые свойства стилевых таблиц

mybiblioteka.su - 2015-2024 год. (0.007 сек.)