Сменяющаяся картинка
Пример использования данного эффекта можно наблюдать непосредственно на моем собственном сайте.
Его отличие, от ранее рассмотренных вариантов, заключается в том, что используется всего одна картинка, которую мы изменяем, но вариантов замены больше чем два. Необходимо так же отметить, что скрипт может вызываться из одной части странички, а смена картинки происходить совершенно в другой.
Как и в предыдущем случае, начнем с корректировки HTML-кода. В данном варианте он будет состоять из двух фрагментов: описание изображения, которое будет меняться и описание областей, при попадании на которые вызывается скрипт. Это может быть, к примеру, то же самое меню:
<img src="pic/default.gif" name="pic"> ... <a href="page_1.htm" onmouseover="over('pic/image-1.gif');" onmouseout="out();"><img src="pic/pic-1.gif"></a><br> <a href="page_2.htm" onmouseover="over('pic/image-2.gif');" onmouseout="out();"><img src="pic/pic-2.gif"></a><br> <a href="page_3.htm" onmouseover="over('pic/image-3.gif');" onmouseout="out();"><img src="pic/pic-3.gif"></a>
Соответственно, придется скорректировать и поведение функций. В функцию over(), которая вызывается в результате попадания курсора в активную область, достаточно передать только ссылку на заменяющее изображение. Вызов же функции out() осуществляется и вовсе без параметров:
function over(ref) { if (browser_ok == 'true') { document.images[img].src = ref; } }
function out() { if (browser_ok == 'true') { document.images[img].src = "pic/default.gif"; } }
Вот мы и разобрались со всеми вариантами скриптов, для реализации эффекта RollOver. Но, подождите еще немножко, т.к. осталось рассмотреть еще один очень важный вопрос:
