В последнее время появилась большая мода на включение JavaScript-событий onMouseOver и onMouseOut в код веб-документов, содержащих различные объекты (навигационные меню, простые графические изображения, таблицы и пр.). Вы наверняка не раз посещали Интернет-сайты, на которых присутствовали некие элементы, изменяющиеся как только над ними установится курсор мыши. Наводите курсор — вид элемента изменяется (событие onMouseOver), убираете курсор — элемент принимает свой исходный вид (событие onMouseOut). Такой эффект чаще всего применяется к текстовым фрагментам, табличным ячейкам и графическим изображениям. Рассмотрим каждый из вариантов.
По сути, говоря об изменении внешнего вида текста при наведении на него курсора, следует заметить, что в данном случае никакое событие языка JavaScript не используется: данный эффект достигается при помощи каскадных таблиц стилей CSS:
A { color: black; }
A:Hover { color: red; }
Если вы вставите такую инструкцию в нужную страницу или зададите в ней путь к внешнему файлу с расширением .css, все гиперссылки будут отображаться черным цветом, а при наведении курсора мыши цвет будет меняться на красный.
Если вы хотите, чтобы этот эффект был применен к отдельным ячейкам таблицы (которая может, например, служить меню сайта), то одними каскадными таблицами стилей здесь не обойтись — придется подключать события JavaScript. Сперва задаем условия отображения для активной и неактивной ячеек:
TD.normal
{
background:black;
}
TD.selected
{
background:silver;
}
По данному стилевому предписанию, исходный цвет ячеек должен быть черным (TD.normal и background:black;), а при наведении на них курсора мыши становится серебристым (TD.selected и background:silver;). Теперь осталось связать события замены/возврата объекта с заданными стилевыми параметрами (не забывайте обособлять наименования назначенных стилевых классов отдельными одинарными кавычками):
<td class=»normal» onMouseOver=»this.className=’selected'» onMouseOut=»this.className=’normal'»>Ячейка 1</td>
Однако, наибольшую популярность все же получило использование эффекта изменения при наведении курсора в области графических изображений. Если текст и табличные ячейки могли только менять цвет, то графика давала гораздо больше возможностей для фантазии, т.к. во втором элементе (выводящимся посредством события onMouseOver) можно было менять все, что угодно: цвет, размер, оформление, надписи и т.д. Можно просто поменять исходный зеленый цвет надписи на графической заготовке на желтый, а можно добавить эффект объемности или подсветки, или поместить подсказку. Одним словом, вариантов совместного применения графики и данных событий JavaScript — огромное количество, и все их перечислить невозможно, поэтому перейдем непосредственно к тому, как этот своеобразный альянс реализовать. Сначала определяем условия отображения графических заготовок для двух разных событий (раздел HEAD):
<script language = «JavaScript»>
<!— //
if (document.images) {
img0on = new Image();
img0on.src =»./img/1_active.gif»;
img1on = new Image();
img1on.src =»./img/2_active.gif»;
img2on = new Image();
img2on.src =»./img/3_active.gif»;
img0off = new Image();
img0off.src =»./img/1_passive.gif»;
img1off = new Image();
img1off.src =»./img/2_passive.gif»;
img2off = new Image();
img2off.src =»./img/3_passive.gif»;
}
где 1_active.gif, 2_active.gif, 3_active.gif — файлы, отображающиеся при наведении курсора мыши; 1_passive.gif, 2_passive.gif, 3_passive.gif — исходные файлы и файлы, повторно загружаемые браузером, когда курсор перемещается за пределы графических заготовок;
Далее необходимо определить функции, выполняющие замену/возврат изображений:
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + «on.src»);
}
}
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + «off.src»);
}
}
// —>
</script>
На этом код самого JavaScript-сценария, вставляемого в раздел HEAD документа, заканчивается. Теперь нужно связать HTML-код графических изображений с заданными параметрами посредством событий onMouseOver и onMouseOut:
<a href=»page1.html» onMouseOver = «imgOn(‘img0’); return true» onMouseOut = «imgOff(‘img0’)» ><img src=»./img/1_passive.gif» width=150 height=50 border=0 name=»img0″></a>
<a href=»page2.html» onMouseOver = «imgOn(‘img1’); return true» onMouseOut = «imgOff(‘img1’)» ><img src=»./img/2_passive.gif» width=150 height=50 border=0 name=»img1″></a>
<a href=»page3.html» onMouseOver = «imgOn(‘img2’); return true» onMouseOut = «imgOff(‘img2’)» ><img src=»./img/3_passive.gif» width=150 height=50 border=0 name=»img2″></a>
Здесь необходимо обратить особое внимание на следующие моменты. Во-первых, значения onMouseOver и onMouseOut должны совпадать с условиями, определенными в начале скрипта:
img0on = new Image(); img0on.src ="./img/1_active.gif"; img0off = new Image(); img0off.src ="./img/1_passive.gif";
Другими словами, нельзя для данных условий задать следующее: onMouseOver = «imgOn(‘img2’); return true» onMouseOut = «imgOff(‘img2’)», т.к. далее у нас указан файл неактивной графической заготовки 1_passive.gif, отображение которого зависит от фрагмента кода, данного чуть выше. onMouseOver = «imgOn(‘img2’); return true» onMouseOut = «imgOff(‘img2’)» будет соответствовать условиям:
img2on = new Image(); img2on.src ="./img/3_active.gif"; img2off = new Image(); img2off.src ="./img/3_passive.gif";
Во-вторых, обязательно указание атрибута NAME в теге IMG графических изображений со значением, соответствующим условиям отображения (начало сценария) и параметрам событий onMouseOver и onMouseOut.
На этом, в принципе, можно было и завершить разговор о способах реализации эффекта MouseOver, однако освещение областей применения этого эффекта было бы неполным, если не упомянуть такое средство динамического HTML, как фильтры. Вообще следует заметить, что сегодня DHTML-фильтры пользуются весьма низкой популярностью по старой, как мир, причине: несовместимость документов, использующих такие фильтры, с такими браузерами, как Netscape Navigator и Opera (разумеется, Microsoft как компания-разработчик динамических средств HTML осуществила в своем браузере полную поддержку данной спецификации).
Более подробно о динамических фильтрах будет рассказано в следующей части «Копилки веб-мастера», а на сегодня мы ограничимся рассмотрением всего лишь одной функциональной возможности этой технологии — в качестве логического дополнения к разговору о способах реализации эффекта MouseOver.
Для того, чтобы получить этот эффект, нам потребуется всего одна графическая заготовка (а не пара, как в предыдущем примере!) и какой-нибудь DHTML-фильтр (возьмем один из наиболее часто встречаемых, а именно — alpha, устанавливающий степень прозрачности объекта). Исходя из синтаксических правил указания фильтров и JavaScript-событий onMouseOver и onMouseOut, вписываем в нужное место документа следующую инструкцию (раздел BODY):
<img src=»./img/example.gif» style=»filter:alpha(opacity=75)» onMouseOver=»this.filters.alpha.opacity=100″ onMouseOut=»this.filters.alpha.opacity=75″ width=250 height=85>
Здесь свойство фильтра opacity определяет степень прозрачности: значение «0» означает полную прозрачность объекта, значение «100» — нормальный вид изображения (без действия фильтра). Согласно описанию событий замены/возврата объекта, исходный вид изображения будет «обработан» фильтром alpha и сделает его «прозрачнее» (светлее в визуальном плане). При наведении курсора мыши на заготовку объект принимает свой первоначальный вид (onMouseOver=»this.filters.alpha.opacity=100), при перемещении курсора за пределы изображения на объект вновь накладывается фильтр (onMouseOut=»this.filters.alpha.opacity=75).
