Создание правильных кнопок-ролловеров (с предзагрузкой изображений)
Rollover (Эффект при наведении курсора мыши) является одним из наиболее простых и в то же время самых популярных сценариев на веб-страницах. Тем не менее в 90% случаев это простой скрипт сделан неправильно. Факт!
Нам в первую очередь необходимо понять, как этот сценарий должен работать. На первый взгляд это выглядит довольно элементарно: всякий раз, когда пользователь перемещает курсор мыши на кнопку, кнопка измененяет собственное состояние (одно изображение заменяется другим).
Эффект должен проявиться сразу, но часто он не работает. Почему? Дело в том, что вторая (активная) фотография загружается только тогда, когда пользователь перемещает курсор мыши на кнопку. Даже если пользователь имеет высокоскоростное подключение к Интернету - это отнимет некоторое время. Чем больше размер изображения - тем больше задержка.
Пример неправильного ролловера
<a href="#" onmouseover=rollover('ibutton1','ibutton1_red.gif'); onmouseout=rollover('ibutton1','ibutton1_blue.gif') style="float:left"><img src="/data/scripts/simple_rollover_button/ibutton1_blue.gif" name="ibutton1" width="109" height="25" border="0"></a>
<a href="#" onmouseover=rollover('ibutton2','ibutton2_red.gif'); onmouseout=rollover('ibutton2','ibutton2_blue.gif') style="float:left"><img src="/data/scripts/simple_rollover_button/ibutton2_blue.gif" name="ibutton2" width="109" height="25" border="0"></a>
<a href="#" onmouseover=rollover('ibutton3','ibutton3_red.gif'); onmouseout=rollover('ibutton3','ibutton3_blue.gif') style="float:left"><img src="/data/scripts/simple_rollover_button/ibutton3_blue.gif" name="ibutton3" width="109" height="25" border="0"></a>
<div class="clear"></div>
Когда вы перемещаете указатель мыши на кнопку в первый раз, вы можете увидеть небольшой лаг.
Предварительная загрузка изображений
Вы должны использовать этот скрипт для загрузки изображений как можно раньше. Вставьте этот код
<script type="text/javascript">
<!--
if(document.images)
{
var image_array = new Array();
// path to the directory with images
var path = '/img/';
// enumeration of the "active" images
image_array[0] = path + "button1_red.gif";
image_array[1] = path + "button2_red.gif";
image_array[2] = path + "button3_red.gif";
var preload_image = new Array ();
for(var i=0; i<image_array.length; i++)
{
preload_image[i]= new Image();
preload_image[i].src = image_array[i];
}
}
//-->
</script>
между тегами
После того, как изображения будут загружены , мы используем обычный HTML код кнопок ролловеров.
HTML code
<a href="#" onmouseover="rollover('button1','button1_red.gif')" onmouseout="rollover('button1','button1_blue.gif')"><img src="/img/button1_blue.gif" name="button1" width="109" height="25" border="0"></a>
<a href="#" onmouseover="rollover('button2','button2_red.gif')" onmouseout="rollover('button2','button2_blue.gif')"><img src="/img/button2_blue.gif" name="button2" width="109" height="25" border="0"></a>
<a href="#" onmouseover="rollover('button3','button3_red.gif')" onmouseout="rollover('button3','button3_blue.gif')"><img src="/img/button3_blue.gif" name="button3" width="109" height="25" border="0"></a>
Обработчики событий onmouseout и onmouseover используется для выполнения указанного Javascript кода, когда пользователь перемещает мышь на кнопку или убирает указатель мыши с кнопки.
Rollover функция
Вставьте этот код в любом месте вашего HTML-кода, но до HTML-кода кнопок:
<script type="text/javascript">
<!--
function rollover(name, filename)
{
var fullpath = '/img/' + filename;
document.images[name].src = fullpath;
}
//-->
</script>
Примечание: Установить переменную FullPath = "", если изображения расположенны в том же каталоге, что и HTML-файлы.
Перевод: PS-Studio.Info
Оставь комментарий первым!
