Kompx.com or Compmiscellanea.com

JavaScript ролловер. Смена изображения

Windows : Internet Explorer 4.0+, Firefox 1.0+, Google Chrome, Opera 3.21+, Safari 3.1+, SeaMonkey 1.0+, [ 1 ].

Linux : Firefox 1.0+, Chromium, Opera 5.0+, SeaMonkey 1.0+, hv3, [ 2 ].

Пример n.1 ( Для современных веб браузеров: Internet Explorer 4.0+, Firefox 1.0+, Google Chrome, Opera 4.0+, Safari 3.1+, SeaMonkey 1.0+, [ 3 ] ):

JavaScript ролловер. Смена изображения

HTML / XHTML. Код:

<a href="javascript-rollover-smena-izobrazhenija.htm" onmouseover="image_over();" onmouseout="image_out();"><img src="out.gif" class="image" id="imageout" width="728" height="67" alt="JavaScript ролловер. Смена изображения" /></a>

CSS. Код:

.image {border: 0px;}

JavaScript. Код:

imageout=new Image();

imageout.src="out.gif";

imageover=new Image();

imageover.src="over.gif";

function image_out(){

document.images['imageout'].src='out.gif';

};

function image_over(){

document.images['imageout'].src='over.gif';

};

Изображение для смены 1 ( out.gif ):

Изображение для смены 2 ( over.gif ):

Пример n.2 ( Для старых веб браузеров: Internet Explorer 4.0+, Netscape 3.04+, Opera 3.21+ ):

HTML / XHTML. Код:

<a href="javascript-rollover-smena-izobrazhenija.htm" onmouseover="image_over();" onmouseout="image_out();"><img src="out.gif" class="image" id="imageout" name="imageout" width="728" height="67" border="0" alt="JavaScript ролловер. Смена изображения"></a>

JavaScript. Код:

imageout=new Image();

imageout.src="out.gif";

imageover=new Image();

imageover.src="over.gif";

function image_out(){

document.images['imageout'].src='out.gif';

};

function image_over(){

document.images['imageout'].src='over.gif';

};

Изображение для смены 1 ( out.gif ):

Изображение для смены 2 ( over.gif ):

Cтраница-пример 1 примера n.2 - JavaScript код во внешнем файле - для Internet Explorer 4.0+, Netscape 3.04 - 4.xx, Opera 3.21 - 3.6x: [ Открыть страницу-пример ] [ Cкачать в архиве ]

Cтраница-пример 2 примера n.2 - JavaScript код в HTML документе (использовалось, например, для Netscape 3.xx, отображающего страницы с веб серверов не сконфигурированных отсылать клиентам MIME-тип "application/x-javascript" для файлов .js) - для Internet Explorer 4.0+, Netscape 3.04 - 4.xx, Opera 3.21 - 3.6x: [ Открыть страницу-пример ] [ Cкачать в архиве ]

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. Устаревшее, но и сейчас вполне работающее.

Общая идея

1. Два изображения загружаются с помощью JavaScript кода в кэш браузера. А такое же, как одно из двух предзагруженных изображений помещается в веб документ HTML тегом img.

2. Когда курсор мыши наводится на изображение, отображается другое предзагруженное изображение. Когда курсор мыши уводится с изображения, отображается изначальное изображение.

Существуют и другие способы создания ролловеров, как с помощью JavaScript, так и других технологий: CSS, VBScript, Java, Flash, некоторых других.


[ 1 ]

А так же в Mozilla 0.6+ и Netscape 3.04+.

[ 2 ]

А так же в Mozilla 0.6+ и Netscape 3.04+.

[ 3 ]

А так же в Mozilla 0.6+ и Netscape 6.0+.


Aliosque subditos et thema

 

HTML выравнивание по центру

 

Выравнивание содержимого страницы по центру в видимой области окна браузера с помощью HTML - без CSS. Контейнер, в котором будет находится содержимое веб-страницы выравнивается по центру - по ширине и по высоте: [ Открыть страницу-пример ]. HTML. Код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>HTML выравнивание по центру</title> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252"> </head> <body bgcolor="#ffffff"> <table width="100%" height="100%" bgcolor="#a3ddc4"> <tr> <td align="center"> <table width="800" height="500" bgcolor="#ff6f6f"> <tr> <td>&nbsp;</td> </tr> </table> </td> </tr> </table> </body> </html> Внешняя HTML-таблица делает всю видимую область окна браузера, за исключением отступов от каждого края элемента, HTML-таблицей, а все пространство этой таблицы - ячейкой HTML-таблицы. Ячейка внешней HTML-таблицы наследует значение по умолчанию для атрибута valign от своего родительского ряда ( тег tr ) таблицы. А этот ряд в свою очередь наследует значение по умолчанию для атрибута valign от тега tbody внешней HTML-таблицы - даже если тег tbody не использован. И это значение: middle. Так что контейнер с содержимым внутри внешней HTML-таблицы выравниватся в видимой области окна браузера по центру - по высоте. Align="center" ячейки внешней HTML-таблицы выравнивает контейнер с содержимым внутри неё по центру / по ширине в видимой области окна браузера Внутренняя таблица, та, которая внутри ячейки внешней HTML-таблицы, создает контейнер данного размера. Высота может быть не задана или ширина или и то, и другое. Тогда размер контейнера будет принимать такие величины, какие позволят вместить содержимое. Если ширина или высота или то, и другое окажутся больше размеров видимой области окна браузера, то все равно контейнер будет выровнен по центру. Поскольку выравнивание по центру с помощью только HTML является самым старым методом, он работает не только в более старых браузерах, но и в таких, которые попросту древние. После добавления еще одного HTML тега ( <center></center> ) вокруг внешней HTML-таблицы данный способ будет работать и в Internet Explorer 3 : [ Открыть страницу-пример ] Скачать Internet Explorer 3: пакет, содержащий версии 3.0, 4.01, 5.01, 5.5, 6.0 Internet Explorer'а HTML.

Консольные приложения для Windows. Веб браузеры

 

Lynx : Links : ELinks Текстовые, они же консольные веб браузеры более типичны для среды Linux и других юниксоподобных систем. Там текстовые веб браузеры были созданы, там находится их основная линия развития. Очень немногие (например, Wanna-Be / WannaBe для классических Mac OS) консольные веб браузеры были созданы изначально для каких-то других операционных систем. И текстовые веб браузеры для Windows являются версиями консольных веб браузеров *nix систем. Хотя те из них, что работают не в среде Cygwin, имеют свои небольшие особенности. Когда-то текстовые веб браузеры были важным средством для просмотра веб документов. По мере развития программ с графическим интерфейсом далее в dial-up эпоху, текстовые веб браузеры были полезны как самый быстрый способ просмотра веб документов и как часть комплексов приложений для преобразования текста в речь. Распространение широкополосного интернета и специализированного софта для звуковой передачи содержания веб-страниц сократили сферу применения консольных веб браузеров. Тем более, что большинство пользователей Windows всегда имели весьма смутное представление о их существовании. Тем не менее, текстовые веб браузеры представляют собой высокоразвитые специализированные средства, которые могут пригодиться в самых разных ситуациях и при использовании операционной системы Windows. Lynx - / home page / Текстовый веб браузер. Версии для Linux, FreeBSD, Mac OS X, некоторых других *nix систем, DOS, Windows, BeOS, MINIX, QNX, AmigaOS, OpenVMS и классических Mac OS. HTML ( Подробнее 1 ) ( Подробнее 2 ) Lynx 2.8.5rel.1: lynx.isc.org Lynx 2.8.5rel.1: w3schools.com/browsers/browsers_stats.asp Lynx 2.8.5rel.1: en.wikipedia.org/wiki/Lynx_(web_browser) Lynx 2.8.5rel.1: ebay.com Lynx 2.8.5rel.1: kompx.com/en/web-browsers-for-dos.htm Lynx 2.8.5rel.1: twitter.com Links - / home page / Текстовый веб браузер. Версии для Linux, FreeBSD, Mac OS X, некоторых других *nix систем, BeOS, Haiku, OS/2, DOS, Windows.