KOMPX.COM or COMPMISCELLANEA.COM   

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):

Общая идея:

  1. Два изображения загружаются в кэш браузера с помощью JavaScript. Оно из загруженных изображений помещается на страницу с помощью HTML тега <img>.
  2. Когда указатель мыши наводится на изображение, начинает отображаться другое загруженное изображение. Когда указатель мыши уводится с изображения, отображается изначальное загруженное изображение.

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.

Страница-пример (откроется в новой вкладке или окне) ...

Поддержка в браузерах
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+
Ещё