процесс пройдет более гладко.
Если у Вас есть быстрая связь с Интернет, то Вы можете не понять, к чему весь этот разговор. О какой задержке все время говорит этот парень? Прекрасно, но еще остаются люди, имеющие более медленный модем, чем 14.4 (Нет, это не я. Я только что заменил свой на 33.6, да…).
Изменение изображений в связи с событиями, инициируемыми самим читателем
Вы можете создать красивые эффекты, используя смену изображений в качестве реакции на определенные события. Например, Вы можете изменять изображения в тот момент, когда курсор мыши попадает на определенную часть страницы. Проверьте, как работает следующий пример, просто поместив курсор мыши на картинку (впрочем, при этом Вы получите сообщение об ошибке, если пользуетесь браузером, поддерживающим лишь JavaScript 1.0 — как этого избежать, мы узнаем чуть позже).
Исходный код этого примера выглядит следующим образом:
<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>
При этом могут возникнуть следующие проблемы:
· Читатель пользуется браузером, не имеющим поддержки JavaScript 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, у нас браузер с поддержкой JavaScript
var browserOK = false;
var pics;
// — >
</script>
<script language='JavaScript1.1'>
<!- hide
// браузер с поддержкой JavaScript 1.1!
browserOK = true;
pics = new Array();
// — >
</script>
<script language='JavaScript'>
<!- hide
var objCount = 0; // количество изображений на web-странице
function preload(name, first, second) {
// предварительная загрузка изображений и размещение их в массиве
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]) {
// вернуть в исходное систояние все другие изображения
document.images[pics[i][2]].src = pics[i][0].src;
} else {
// показывать вторую картинку, поскольку курсор пересекает данное изображение
document.images[pics[i][2]].src = pics[i][1].src;
}
}
}
}
function off(){
if (browserOK) {
for (i = 0; i < objCount; i++) {
// вернуть в исходное систояние все изображения
if (document.images[pics[i][2]]!= null)
document.images[pics[i][2]].src = pics[i][0].src;
}
}
}
// заранее загружаемые изображения — Вы должны здесь указать
// изображения, которые нужно загрузить заранее, а также объект Image,
// к которому они относятся (первый аргумент). Именно эту часть
// нужно корректировать, если Вы хотите использовать скрипт
// применительно к другим изображениям (конечно это не освобождает
// Вас от обязанности подредактировать в документе также и раздел body)
preload('link1', 'img1f.gif', 'img1t.gif');
preload('link2', 'img2f.gif', 'img2t.gif');
preload('link3', 'img3f.gif', 'img3t.gif');
