Изображения в web-странице

Теперь мы рассмотрим объект, который является доступным начиная с Java Script? версии 1.1 (то есть с Netscape Navigator 3.0). С помощью Image-объекта Вы можете изменять изображения на web-странице. Это позволяет нам например создавать мультипликации.
Пожалуйста обратите внимание, что пользователи более старых броузеров (типа Netscape Navigator 2.0 или Microsoft Internet Explorer 3.0 – они используют Java Script? 1.0) не смогут выполнять сценарии, показанные в этой части – или по крайней мере они не смогут увидеть эффект в полной мере.
Сначала давайте посмотрим, как могут быть адресованы изображения в web-страницы через Java Script?. Все изображения представляются через массив. Этот массив назван images. Это свойство document-объекта. Каждое изображение на web-странице получает номер. Первое изображение получает номер 0, второе изображение получает номер 1 и так далее. Так что мы можем адресовать первое изображение через document.images[0].
Каждое изображение в HTML-документе рассматривается, как Image-объект. Image-объект имеет некоторые свойства, к которым можно обращаться через Java Script?. Вы можете например видеть, какой размер имеет изображение с свойствами width и height. document.images[0].width дает Вам ширину (в пикселях) первого изображения на web-странице.
Особенно, если у Вас много изображений на одной странице, становит тяжело вести счет всех изображений. Эту проблему решает предоставление имен различным изображениям. Если Вы объявляете изображение с этим тегом

<img src="img.gif" name="myImage" width=100 height=100>

Вы можете адресовать его через document.myImage или document.images["myImage"].

Загрузка новых изображений

Хотя полезно знать, как получить размер изображения на web-странице, но не это является целью нашего урока. Мы хотим изменять изображения на web-странице. Для этой цели мы нуждаемся в src свойстве. Итак в теге <img> свойство src, представляет адрес отображаемого изображения. Теперь, с помощью Java Script? 1.1 Вы можете присваивать новые адреса уже загруженному изображению на web-странице. Результатом является то, что загружается изображение, размещенное по новому адресу. Это новое изображение заменяет старое изображение на web-странице. Рассмотрите этот пример:

<img src="img1.gif" name="myImage" width=100 height=100>

Изображение img1.gif загружается и получает имя myImage. Следующая строка кода заменяет старое изображение img1.gif на новое изображение img2.gif:

document.myImage.src= “img2.src”;

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

Единственный недостаток мог бы состоять в том, что новое изображение загружается после присвоения нового адреса свойству src. Поскольку изображение – предварительно не загружено, требуется некоторое время, пока новое изображение не восстановится через Internet. В некоторых ситуациях это нормально, но зачастую задержки, вызванные этим процессом – не приемлемы. Так что мы можем сделать относительно этого? Да, предварительная загрузка изображения является решением. Для этой цели мы должны создать новый Image-объект. Рассмотрите эти строки кода:

hiddenImg= new Image();
hiddenImg.src= “img3.gif”;

Первая строка создает новый Image-объект. Вторая строка определяет адрес изображения, которое должно представляться через объект hiddenImg. Мы уже видели, что присвоение нового адреса свойству src вынуждает броузер загружать изображение с указанным адресом. Так что изображение img2.gif загружается, когда выполняется вторая строка этого кода. Итак, имя hiddenImg подразумевает, что изображение не отображается после того, как броузер закончил загружать его. Оно только сохраняется в памяти (или лучше в кэше), для того, чтобы воспользоваться им позднее. Чтобы отобразить его, мы можем теперь использовать эту строку:

document.myImage.src= hiddenImg.src;

Теперь изображение берётся из кэша и сразу отображается. Таким образом Мы управляем предварительной загрузкой изображения.
Конечно броузер, должен, закончить предварительную загрузку для того. чтобы отобразить изображение без задержки. Так что, если у Вас много изображений, определенных для предварительной загрузки, то возможна задержка в работе, потому что броузер будет занят, загрузкой всех остальных изображений. Вы всегда должны учитывать быстродействие Internet – загрузка изображений не пойдет быстрее с этим кодом, показанным здесь. Мы только пробуем запустить загрузку изображений раньше, поэтому пользователь увидит их раньше. Для этого потребуется целый процесс, намного более гладкий.
Если Вы имеете быстрое Internet подключение, Вы могли бы задаться вопросом, о чем весь этот разговор. Относительно какой задержки этот парень говорит все время? Но все еще попадаются люди, сидящие за 14.4 модемом (Нет, не я. Я улучшил свои возможности только до 28.8 – о да...).

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

<a href="#" onMouseOver="document.myImage2.src='img2.gif'" onMouseOut="document.myImage2.src='img1.gif'"> <img src="img1.gif" name="myImage2" width=160 height=50 border=0></a>

Однако этот код вызывает некоторые проблемы:

• • Пользователь может использовать броузер ниже Java Script? 1.1.
  • Второе изображение предварительно не загружено.
  • Мы должны перезаписать код для каждого изображения на web-странице.
  • Нам нужен сценарий, который может использоваться во многих web-страницах много раз без существенных изменений.

Теперь мы посмотрим на законченный сценарий, который решает эти проблемы. Сценарий стал намного более длинным, но написав его однажды, Вы не должны больше беспокоиться относительно этих проблем.
Имеются два требования для сохранения гибкости этого сценария:

• • Неопределенное число изображений – не имеет значение, используется 10 или 100 изображений
  • Неопределенный порядок изображений – это необходимо для того, чтобы изменить порядок изображений не изменяя код

Взгляните на код (добавлены некоторые комментарии):

<html> <head> <script language="JavaScript"> <!-- hide // ****************************************************** // Script from Stefan Koch - Voodoo's Intro to JavaScript // http://rummelplatz.uni-mannheim.de/~skoch/js/ // JS-book: http://www.dpunkt.de/javascript // You can use this code if you leave this message // ****************************************************** // ok, we have a JavaScript browser var browserOK = false; var pics; // --> </script> <script language="JavaScript1.1"> <!-- hide // JavaScript 1.1 browser - oh yes! browserOK = true; pics = new Array(); // --> </script> <script language="JavaScript"> <!-- hide var objCount = 0; // number of (changing) images on web-page function preload(name, first, second) { // preload images and place them in an array if (browserOK) { pics[objCount] = new Array(3); pics[objCount][0] = new Image(); pics[objCount][0].src = first; pics[objCount][1] = new Image(); pics[objCount][1].src = second; pics[objCount][2] = name; objCount++; } } function on(name){ if (browserOK) { for (i = 0; i < objCount; i++) { if (document.images[pics[i][2]] != null) if (name != pics[i][2]) { // set back all other pictures document.images[pics[i][2]].src = pics[i][0].src; } else { // show the second image because cursor moves across this image document.images[pics[i][2]].src = pics[i][1].src; } } } } function off(){ if (browserOK) { for (i = 0; i < objCount; i++) { // set back all pictures if (document.images[pics[i][2]] != null) document.images[pics[i][2]].src = pics[i][0].src; } } } // preload images - you have to specify which images should be preloaded // and which Image-object on the wep-page they belong to (this is the first // argument). Change this part if you want to use different images (of course // you have to change the body part of the document as well) preload("link1", "img1f.gif", "img1t.gif"); preload("link2", "img2f.gif", "img2t.gif"); preload("link3", "img3f.gif", "img3t.gif"); // --> </script> <head> <body> <a href="link1.htm" onMouseOver="on('link1')" onMouseOut="off()"> <img name="link1" src="link1f.gif" width="140" height="50" border="0"></a> <a href="link2.htm" onMouseOver="on('link2')" onMouseOut="off()"> <img name="link2" src="link2f.gif" width="140" height="50" border="0"></a> <a href="link3.htm" onMouseOver="on('link3')" onMouseOut="off()"> <img name="link3" src="link3f.gif" width="140" height="50" border="0"></a> </body> </html>

Этот сценарий помещает все изображения в массив pics. Функция preload(), вызванная в начале заполняет этого массив. Вы можете видеть, что мы вызываем функцию preload() следующим образом:

preload(«link1», “img1f.gif”, “img1t.gif”);

Это означает, что сценарий должен загрузить два изображения img1f.gif и img1t.gif. Первое изображение должно отображаться, когда курсор вне области изображения. Когда пользователь перемещает курсор по области изображения, показывается второе изображение. С первым параметром “img1” при вызове функции preload() мы определяем, какой Image-объект на web-странице принадлежит двум предварительно загруженным изображениям. Если Вы посмотрите на часть <body> нашего примера, Вы найдете изображение с именем img1. Мы используем имя изображения (а не номер) для того, чтобы можно было изменить порядок изображений без изменения сценария.
Две функции on() и off() вызваны через обработчики события onMouseOver и onMouseOut. Поскольку изображения не могут реагировать на события Mouse Over? и Mouse Out?, мы должны поместить ссылку в изображения.
Как Вы видите, функция on() устанавливает в начальное состояние все остальные изображения. Это необходимо, чтобы избежать того, что несколько изображений будут одновременно подсвечено (событие Mouse Out? не происходит например, когда пользователь перемещает курсор из изображения непосредственно за пределы окна).

Изображения, конечно замечательный путь для улучшения вашей web-страницы. Image-объект позволяет Вам создавать действительно сложные эффекты. Но пожалуйста обратите внимание на то, что не каждое изображение и программа Java Script? улучшают вашу страницу. В сети, Вы можете видеть много примеров где изображения используются ужасным способом. Не количество изображений делает вашу страницу хорошей, а качество. Загружать 50 КБ плохой графики действительно раздражает. Помните об этом при создании эффектов изображения с помощью Java Script? и ваши посетители или покупатели наверняка возвратятся