Введение в JavaScript для Мага
Шрифт:
hiddenImg= new Image;
hiddenImg.src= "img3.gif";
В первой строке создается новый объект Image. Во второй строке указывается адрес изображения, которое в дальнейшем будет представлено с помощью объекта hiddenImg. Как мы уже видели, запись нового адреса в атрибуте src заставляет браузер загружать изображение с указанного адреса. Поэтому, когда выполняется вторая строка нашего примера, начинает загружаться изображение img2.gif. Но как подразумевается самим названием hiddenImg ("скрытая картинка"), после того, как браузер закончит загрузку, изображение на экране не появится. Оно будет лишь будет сохранено в памяти компьютера (или точнее в кэше) для последующего использования. Чтобы вызвать изображение на экран, мы можем воспользоваться строкой:
document.myImage.src= hiddenImg.src;
Но теперь изображение уже немедленно
Конечно браузер должен был к моменту запроса закончить упреждающую загрузку, чтобы необходимое изображение было показано без задержки. Поэтому, если Вы должны предварительно загрузить большое количество изображений, то может иметь место задержка, поскольку браузер будет занят загрузкой всех картинок. Вы всегда должны учитывать скорость связи с Интернет — загрузка изображений не станет быстрее, если пользоваться только что показанными командами. Мы лишь пытаемся чуть раньше загрузить изображение — поэтому и пользователь может увидеть их раньше. В результате и весь процесс пройдет более гладко.
Если у Вас есть быстрая связь с Интернет, то Вы можете не понять, к чему весь этот разговор. О какой задержке все время говорит этот парень? Прекрасно, но еще остаются люди, имеющие более медленный модем, чем 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");
// — >
</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. Первое из них — это та картинка, которая будет представлена, пока курсор мыши не попадает в область изображение. Когда же пользователь помещает курсор мыши на изображение, то появляется вторая картинка. При вызове функции preload в качестве первого аргумента мы указываем слово "link1" и тем самым задаем на web-странице объект Image, которому и будут принадлежать оба предварительно загруженных изображения. Если Вы посмотрите в нашем примере в раздел <body>, то обнаружите изображение с тем же именем link1. Мы пользуем не порядковый номер, а именно имя изображения для того, чтобы иметь возможность переставлять изображения на web-странице, не переписывая при этом сам скрипт.
Обе функции on и off вызываются посредством программ обработки событий onMouseOver и onMouseOut. Поскольку сам элемент image не может отслеживать события MouseOver и MouseOut, то мы обязаны сделать на этих изображениях еще и ссылки.
Можно видеть, что функция on возвращает все изображения, кроме указанного, в исходное состояние. Делать это необходимо потому, что в противном случае выделеными могут оказаться сразу несколько изображений (дело в том, что событие MouseOut не будет зарегистрировано, если пользователь переместит курсор с изображения сразу за пределы окна).
Изображения — без сомнения могучее средство уличшения Вашей web-страницы. Объект Image дает Вам возможность создавать действительно сложные эффекты. Однако заметим, что не всякое изображение или программа JavaScript способно улучшить Вашу страницу. Если Вы пройдетесь по Сети, то сможете увидеть множество примеров, где изображения использованы самым ужасным способом. Не количество изображений делает Вашу web-страницу привлекательной, а их качество. Сама загрузка 50 килобайт плохой графики способна вызвать раздражение. При создании специальных эффектов с изображениями с помощью JavaScript помните об этом и ваши посетителями/клиентами будут чаще возвращаться на Ваши страницы.
Часть 9: Слои I
Что такое слои?
Слои — это одна из замечательных новых возможностей браузера Netscape Navigator 4.0. Она позволяет выполнять точное позиционирование таких объектов web-страницы, как изображения. Кроме того, теперь Вы можете перемещать объекты по вашей HTML-странице. Вы можете также делать объекты невидимыми.
Управлять слоями можно легко с помощью языка JavaScript. Я надеюсь, что Вы, как и я, проникнитесть энтузиазмом в отношении возможностей этих слоев.
В данный момент пользоваться слоями Вы можете только в Netscape Navigator 4.0!
И, как обычно, я не буду детально описывать различные тэги. Хороший документ, описывающий все свойства такого объекта Netscape Navigator 4.0, как слои, находится по адресу— и потому у меня нет нужды его пересказывать.
Что такое в действительности слои? Объяснять это очень легко на простом примере: берете несколько листов бумаги. На одном листе пишете текст. На другом — рисуете картинку. На третьем листе берете картинку и вписываете вокруг нее некий текст. И так далее. Теперь кладете эти листы на стол. Допустим, каждый лист — это некий слой. В этом смысле слой представляет собой в некотором роде контейнер. То есть он может включать в себя (содержать) некие объекты — в данном случае это будет текст и изображения.