Готовые изображения могут включаться в веб-страницы с помощью тега
<img>.
Подобно любому HTML-элементу, элементом
<img>
можно управлять: присваивание нового URL-адреса свойству
sгс
заставляет броузер загрузить (если необходимо) и отобразить новое изображение. (Кроме того, можно изменять ширину и высоту изображения, заставляя броузер увеличивать или уменьшать его, но этот прием здесь не рассматривается.)
Возможность динамической замены одного изображения другим в HTML-документе открывает доступ к некоторым специальным эффектам. На практике чаще всего прием смены изображений привязывается к наведению указателя мыши на изображение. Когда изображение размещается внутри гиперссылки, смена изображения становится приглашением пользователю щелкнуть на изображении. (Аналогичный эффект можно получить с помощью псевдокласса CSS
:hover
, позволяющего изменять фоновое изображение элемента.) Следующий фрагмент разметки HTML выводит изображение, которое изменяется при наведении на него указателя мыши:
<img src="images/help.gif"
onmouseover="this.src='images/help_rollover.gif'"
onmouseout="this.src='images/help.gif'">
Обработчики событий в элементе
<img>
изменяют значение свойства
src
, когда указатель мыши наводится на изображение или покидает его границы. Эффект смены изображений отчетливо связывается с возможностью щелкнуть на изображении, поэтому такие элементы
<img>
следует заключать в элементы
<а>
или передавать обработчику события
onclick
.
Чтобы радовать глаз, эффект смены изображений (и родственные ему эффекты) должен иметь минимальное время отклика. Это означает, что необходим некоторый способ, гарантирующий предварительную загрузку всех необходимых изображений в кэш броузера. Для этой цели в клиентском JavaScript имеется специальный прикладной интерфейс: чтобы принудительно поместить изображение в кэш, нужно сначала создать объект
Image
с помощью конструктора
Image.
Затем, записав в свойство
src
требуемый URL-адрес, загрузить изображение. Это изображение не будет добавлено в документ, поэтому, хотя изображение будет невидимо, броузер загрузит его и поместит в свой кэш. Позднее, когда тот же URL-адрес будет использоваться для изменения изображения, находящегося на экране, изображение быстро загрузится из кэша броузера.
Приведенный выше фрагмент разметки, воспроизводящий эффект смены изображений, не выполняет предварительную загрузку изображений, поэтому пользователь может заметить задержку при смене изображения, когда первый раз наведет на него указатель мыши. Чтобы исправить ситуацию, необходимо немного изменить разметку:
Только что продемонстрированный фрагмент содержит один элемент
<script>
и два атрибута обработчиков событий с JavaScript-кодом для реализации единственного эффекта смены изображений. Это прекрасный пример навязчивого Java-Script-кода: объем программного кода достаточно велик, чтобы осложнить чтение разметки HTML. В примере 21.1 приводится ненавязчивая альтернатива, позволяющая выполнять смену изображений простым добавлением атрибута
data-rollover
(раздел 15.4.3) к любому элементу
<img>.
Обратите внимание, что в этом примере используется функция
onLoad
из примера 13.5. В нем также используется массив
document.images[]
(раздел 15.2.3), в котором хранятся ссылки на все элементы
<img>
в документе.
Пример 21.1. Ненавязчивая реализация эффекта смены изображений