Эффект перекатывания

Эффектом перекатывания или Rollover называют замену одного изображения другим при наведении на него курсора мыши. Наводим мышь на рисунок, он меняется на другой, уводим мышь, рисунок становится прежним.

Браузер Internet Explorer поддерживает события мыши прямо для тега IMG.

Событие onMouseOver отвечает за наведение курсора мыши на рисунок, а onMouseOut за вывод курсора за пределы изображения.

Приведенный способ создания эффекта перекатывания не поддерживается некоторыми браузерами, и, в результате, получится обычный рисунок без всяких эффектов. Чтобы сделать код универсальным и работающим в разных браузерах, следует использовать события мыши на ссылке, внутри которой размещается изображение.

Обращаться к изображению можно разными способами, например, через массив document.images['имя рисунка'].src или просто по имени, как дается в примере – document.Имя рисунка.src. Уникальное имя для изображения указывается внутри тега IMG парамером name. Изменение любого изображения дает большой простор для дизайнерских изысков. Однако, следует учитывать, что браузеры по разному работают с размерами изображения. Internet Explorer вычисляет ширину и высоту каждого изображения и соответственно меняет этот параметр для каждой картинки при ее смене. Netscape берёт размеры первого загруженного изображения, а следующие масштабирует до его размеров. Для преодоления данного расхождения делайте изображения для эффекта перекатывания одного размера.

Интересный эффект, также, получается при использовании анимированного изображения в формате GIF. Рисунок, который представлен ниже, меняется на цветной с изображением крутящей шестеренки.

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

Ниже показан пример использования такого приема. При наведении на слова, обозначающие стороны света, они меняют свой цвет на синий и дополнительно появляется указатель в центре розы.

Предварительная загрузка изображений

При создании эффекта перекатывания, загрузка происходит только первого рисунка. При наведении курсора мыши на изображение, начинается загрузка последующих рисунков, что происходит не мгновенно и портит впечатление от ожидания. Поэтому желательно изображения загружать заранее, еще до их демонстрации. Для этого в JavaScript используется оператор new. В примере, показанном ниже, функция preloadImage загружает изображения в память и проверяет, все ли они уже загружены. Вызов функции происходит с помощью события onLoad указанном в теге BODY.

Пример. Предварительная загрузка изображения

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImage(pic, overpic) {
if (document.images && (preloadFlag == true)) {
document[pic].src = overpic;
}
}

var preloadFlag = false;
function preloadImages() {
frame = new Array();
a = preloadImages.arguments;

if (document.images) {
for (i=0; i<a.length; i++) {
if (a[i].indexOf("#")!=0) { frame[i] = newImage(a[i]); }
}
preloadFlag = true;
}
}

</script>

</body>
</html>

Данный листинг можно получить и с помощью Инструментария.


	Главная > Динамический HTML > Эффект перекатывания