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

 

CSS выравнивание по центру : по ширине и по высоте - 1

 

Выравнивание содержимого страницы по центру в видимой области окна браузера с помощью CSS. Контейнер, в котором будет находиться всё содержимое веб-страницы выравнивается по центру - по ширине и по высоте : [ Открыть страницу-пример ]. HTML / XHTML. Код: <!DOCTYPE html> <html> <head> <title>CSS выравнивание по центру : по ширине и по высоте - 1</title> <link rel="stylesheet" type="text/css" href="css.css" /> </head> <body> <div class="all"> <div class="wrapper"> <div class="pagecontent">&nbsp;</div> </div> </div> </body> </html> CSS. Код: html {height: 100%; margin: 0px;} body height: 100%; margin: 0px;} .all {position: relative; left: 0px; top: 0px; height: 100%; width: 100%; float: left; display: table;} .wrapper {position: relative; left: 0px; top: 0px; height: auto; width: 100%; display: table-cell; vertical-align: middle;} .pagecontent {position: relative; left: 0px; top: 0px; height: 500px; width: 800px; margin: 0 auto; background: #ff6f6f;} Контейнер .pagecontent - для всего содержимого веб-страницы. В отличии от CSS выравнивание по центру, по вертикали и по горизонтали - 2, в данном случае как единицы измерения CSS могут использоваться проценты; а не только px или em. Высота и ширина могут быть больше видимой области окна браузера, но в данном случае речь о более практическом случае - когда высота и ширина контейнера .pagecontent меньше, чем размеры видимой области окна браузера. Блок .pagecontent выравнивается в видимой области окна браузера по центру / по ширине с помощью "margin: 0 auto". .All и его CSS свойства превращают всю видимую область окна браузера в CSS-таблицу. Свойства CSS делают контейнер .wrapper ячейкой этой CSS-таблицы. Содержимое этой ячейки - контейнер .pagecontent и все, что в нем находится - выравнивается в видимой области окна браузера по центру / по высоте свойством CSS "vertical-align: middle". [ 1 ] А так же в Netscape 7.2+, Mozilla 1.5+. [ 2 ] А так же в Netscape 7.2+, Mozilla 1.5+.

Установка и настройка веб браузера Arachne для подключения к сети Интернет через модем и телефонную линию Dial-up

 

A : Установка веб браузера Arachne на диске, создаваемом в оперативной памяти - в этом случае веб браузер Arachne работает быстрее всего. Размер оперативной памяти должен позволять создать RAM диск объемом в 6 Мб и более. Что бы установить и настроить веб браузер Arachne для подключения к сети Интернет через модем и телефонную линию (Dial-up), необходимо несколько программ: 1. Веб браузер Arachne [ Скачать ] 2. Пакет с кириллицей кодировки KOI8-R koi8-r.apm [ Скачать ] 3. Пакет с кириллицей кодировки CP-1251 / Windows-1251 cp1251.apm [ Скачать ] 4. Драйвер мыши, например mouse.com [ Скачать ] 5. Архиваторы. Например, PKZIP [ Скачать ] и PKUNZIP [ Скачать ] 6. В случае, если будет использоваться не MS-DOS 6.0+, QEMM97 [ Скачать ] 7. В случае, если будет использоваться не MS-DOS 6.0+, TDSK [ Скачать ] Установка и настройка веб браузера Arachne по шагам: 1. В оперативной памяти создать диск. Какая именно буква будет назначена ему операционной системой получится из расчета, что A: и B: пойдут для floppy дисководов (даже если он один, то все равно зарезервированы будут две буквы), C: для первого активного основного раздела на первом жестком диске; если есть еще диски, то будут использоваться последовательно столько букв, что бы назвать их всех. Если при этом нет устройств, установленных через DRIVER.SYS или аналогичные драйверы, то следующая буква будет относиться к RAM-диску. Что бы убедиться наверняка, можно, после добавления соответствующей строки в CONFIG.SYS (См. ниже) для создания RAM-диска, например, перезагрузить компьютер и опытным путем проверить под какой буквой находится RAM-диск. В рассматриваемом случае, это E: В зависимости от объема оперативной памяти нужно решить, сколько мегабайт можно выделить для RAM-диска. В принципе, чем больше, тем лучше. Так как, например, кэш браузера при продолжительном и интенсивном использовании в рамках сессии будет разрастаться в объеме. В данном примере объем RAM-диска назначается в 12 000 Кб. Для драйвера MS-DOS RAMDRIVE.SYS верхний предел, это 32 767 Кб, а для TDSK - 64 Мб. Что бы создать такой диск, нужно где-нибудь в средней части файла CONFIG.SYS прописать следующее: DEVICE=C:\DOS\RAMDRIVE.SYS 12000 512 512 /E 2. Создать папку, например C:\DRIVERS\, куда поместить драйвер мыши, например mouse.com. 3. В файл AUTOEXEC.BAT добавить строку, которая будет запускать драйвер мыши. В ней указать полный пусть к драйверу; может быть любой: LH C:\DRIVERS\MOUSE.COM 4. Запустить MemMaker или OPTIMIZE из QEMM97, что бы оптимизировать обращение с базовой памятью. Если MemMaker, то на все предложения можно просто ENTER - MemMaker всё сделает сам. Компьютер перезагрузится несколько раз, каждый раз будет запускаться MemMaker - опять ничего кроме ENTER можно не делать. Если используется QEMM97 ( конкретно приложение OPTIMIZE ), тоже будет несколько перезагрузок и во всех случаях тоже можно только ENTER. 5. Начать установку веб браузера Arachne на RAM-диск, в рассматриваемом примере, это диск E: A195GPL.EXE Что бы продолжить установку, нажать Y Нажать N, что бы ввести нужный путь к папке, куда будет установлен веб браузер Arachne. Ввести нужный путь к папке, куда будет установлен веб браузер Arachne. В рассматриваемом примере, это E:\ARACHNE\.