JavaScript ролловер. Смена изображения
JavaScript ролловер, использующий смену изображения:
HTML код:
<a href="" onmouseover="onMouseOver()" onmouseout="onMouseOut()"><img src="out.gif" id="rollout" alt="" /></a>
JavaScript код:
<script>
rollout=new Image();
rollout.src="out.gif";
rollover=new Image();
rollover.src="over.gif";
function onMouseOut(){
document.images["rollout"].src="out.gif";
};
function onMouseOver(){
document.images["rollout"].src="over.gif";
};
</script>
Изображение для смены 1 (out.gif):
Изображение для смены 2 (over.gif):
Общая идея:
- Два изображения загружаются в кэш браузера с помощью JavaScript. Оно из загруженных изображений помещается на страницу с помощью HTML тега <img>.
- Когда указатель мыши наводится на изображение, начинает отображаться другое загруженное изображение. Когда указатель мыши уводится с изображения, отображается изначальное загруженное изображение.
JavaScript ролловер. Смена изображения
В 1990ые существовало меньше рабочих способов на стороне клиента для того, чтобы сделать веб-страницу чем-то большим, чем простой веб-документ. Реализация CSS была слаба и даже к 1999 году все еще заметно использовались браузеры, не поддерживающие CSS. Интернет-соединения слишком часто были слишком медленными. Java и JavaScript были основной возможностью добиться визуальных эффектов на веб-странице. Java-апплеты, являясь очень мощным инструментом, более сложны в освоении и реализации. Так что JavaScript был тогда в большей мере, чем сейчас ответственен за визуальные эффекты и меньше за техническую сторону - которой больше занимались с помощью технологий со стороны сервера.
Но позже распространение веб-браузеров с основательной поддержкой CSS, сначала псевдоклассов .link, .visited, .hover, .active, затем позиционирования фонового изображения, @font-face и некоторых других вытеснило JavaScript из сферы многих визуальных эффектов. Так же, в 2000ых Интернет стал более ориентированным на поисковую оптимизацию. Это способствовало в пользу текста и против изображений или представления содержимого с помощью плагинов. Что, в свою очередь, ещё больше распространило CSS технологию, ещё больше сокращая область применения JavaScript в сфере визуальных эффектов. Что касается смены изображений, то вместо ролловеров, созданных с помощью JavaScript, стали больше использовать CSS ролловеры.
И ныне продолжают существовать случаи, когда удобно применять JavaScript ролловеры, однако в других ситуациях - ролловеры, используемые в меню, например - CSS технологии подходят больше. Так что JavaScript ролловеры в некотором роде представляют собой живое прошлое всё ещё среди нас. Так же как выравнивание по центру с помощью тега table или имитация обращения с границами HTML таблиц через использование атрибутов cellspacing и bgcolor. Устаревшее, но и сейчас вполне работающее.
Для старых браузеров
С некоторыми изменениями, тот же код может хорошо работать в очень старых браузерах. Таких, как Netscape 4.77, Netscape 3.04 или Opera 3.62:
1. Для старого Netscape и других браузеров без поддержки атрибута id: в тег <img> добавить атрибут name:
<img src="out.gif" id="rollout" name="rollout" alt="" />
2. Для Netscape 3.xx и отображения страниц с веб-серверов, не настроенных отправлять MIME-тип "application/x-javascript" для .js файлов и других подобных случаев: поместить JavaScript код в HTML-документ, а не во внешний файл JavaScript.
Страница-пример (откроется в новой вкладке или окне) ...
- Netscape Navigator 4.7 для Windows ( скачать )
- Netscape Navigator 3.04 для Windows ( скачать )
- Opera 3.62 для Windows ( скачать )
Поддержка в браузерах
- Windows
- Internet Explorer 4.0+
- Firefox 1.0+
- Google Chrome
- Opera 4.0+
- Safari 3.1+
- SeaMonkey 1.0+
- Mozilla 0.6+
- Netscape 6.01+
- Linux
- Firefox 1.0+
- Google Chrome / Chromium
- Opera 5.0+
- SeaMonkey 1.0+
- Mozilla 0.6+
- Netscape 6.01+