Простейшие эффекты с изображениями

Простейшие эффекты с изображениями — это подмена изображения, "горячее" изображение и анимация. Этим мы займемся в первую очередь.

Как заменить одно изображение другим после загрузки страницы?

Проблема

Мне нужно заменить находящееся на Web-странице изображение другим уже после загрузки этой страницы. Как это сделать?

Решение

Объект, соответствующий графическому изображению, поддерживает свойство src, задающее интернет-адрес файла изображения. Чтобы сменить изображение, достаточно присвоить этому свойству интернет-адрес нового файла.

Пример

<IMG ID="img1" SRC="picture1.jpg">

<SCRIPT TYPE="text/javascript">

var imglObject = document. images ["img1"] ;

imglObject.src = "picture2.jpg"; </SCRIPT>

Этот сценарий подменяет изображение, выведенное на Web-страницу из файла picturel.jpg, на изображение из файла picture2.jpg.

Народ советует

Для получения доступа к изображениям на странице удобнее использовать коллекцию images объекта document (как это сделал автор книги в приведенном выше примере). Эта коллекция обычно значительно меньше, чем "глобальная" коллекция all, поэтому поиск в ней выполняется быстрее.

Как создать изображение, меняющееся при наведении на него курсора мыши?

Проблема

Я сделал гиперссылку в виде графического изображения (изображение-гиперссылку) и теперь хочу, чтобы при наведении на него курсора мыши оно менялось. Что мне нужно для этого сделать?

Решение 1

Да всего лишь привязать к событиям onMouseover (наступает при наведении курсора мыши на изображение) и onMouseOut (наступает при "уводе" курсора мыши с изображения) тега <img>, формирующего это изображение, функции-обработчики, которые будут менять одно изображение на другое. И "горячее" изображение готово!

Народ предупреждает!

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

Пример

Вот фрагмент кода страницы, который формирует "горячее" изображение.

<А HREF="#">

<IMG ID="imgl" SRC="picturel.jpg" ONMOOSEOVER="imglObject.src = 'picture2.jpg';" ONMOUSEOUT="imglObject.src = 'picturel.jpg';"> </A>

<SCRIPT TYPE="text/javascript">

var img1Object = document.images["img1"]; </SCRIPT>

Как видим, обработчики событий onMouseOver и onMouseOut в нашем случае получились очень простыми — в одно выражение. Они используют для доступа к экземпляру объекта, соответствующему изображению, переменную img1Object, которая объявляется в расположенном после тега <img> сценарии. Эта переменная будет готова к использованию сразу же после загрузки и вывода на экран содержимого тега <img> и окончания обработки следующего за ним сценария.

Решение 2

Использование универсального объекта HotImage (листинг 6.1). Его конструктор имеет следующий формат вызова:

Hotimage(<Изначамьное изображение>, <3аменяющее изображение> [, <Интернет-адрес>[, <Цель>]]);

Первые два параметра задают интернет-адреса изображений — изначального и заменяющего. Они передаются в строковом виде.

Третий, необязательный, параметр задает также в строковом виде интернет-адрес, по которому произойдет переход при щелчке на "горячем" изображении. Если он не задан, создается "горячее" изображение, не являющееся гиперссылкой.

Четвертый, также необязательный, параметр задает цель "горячего" изображения, т. е. куда будет выведена страница, интернет-адрес которой передан третьим параметром. Если четвертый параметр пропущен, новая страница выводится в то же окно Web-обозревателя, что и текущая (поведение гиперссылок по умолчанию). Цель также задается в строковом виде.

Вот возможные значения четвертого параметра функции-конструктора объекта Hotimage:

"_blank" — загрузка страницы в новом окне Web-обозревателя;

"_parent." и "_top" — загрузка страницы во всем окне Web-обозревателя;

_self" — загрузка страницы в том же самом окне или фрейме (тот же самый эффект будет, если четвертый параметр пропущен);

"<Имя окна или фрейма>" — загрузка страницы в окне или фрейме с заданным именем.

Единственный метод putHere объекта Hotimage помещает HTML-код, создающий "горячее" изображение, в то место, где находится выражение с его вызовом. Этот метод не принимает параметров и не возвращает результата.

Листинг 6.1. Объект Hotimage, создающий на Web-странице "горччее" изображение

// Функция-конструктор

function HotImage(pImageSrc, pAltImageSrc, pHref, pTarget) {

this.imageSrc = plmageSrc; this.altlmageSrc = pAltImageSrc; this.href = pHref; this.target = pTarget;

this.putHere = mjspsPutHere;

>

// Функция, реализующая метод putHere function mjspsPutHere() { var s = "<IMG SRC=\"" + this.imageSrc + "\" ONMOUSEOVER=\"this.src='" + this.altlmageSrc + "'\" ONMOUSEOUT=\"this,src='" + this.imageSrc + "';\""; var sh = ""; var sh2 = "" ; if (this.href) { var sh = "<A HREF=\"" + this.href + "\""; if (this.target)

sh += " TARGET=\"" + this.target + "\""; sh += ">";

s += " BORDER=\"0\""; sh2 = "</A>";

}

S += ">" ;

S = sh + s + sh2; document.write(s); }

Хорошая идея!

Поместите объявление этого объекта в файл сценариев hotimage.js. Впоследствии, чтобы использовать его, достаточно будет просто подключить к Web-странице этот файл сценариев с помощью тега:

<SCRIPT SRC="hotimage.js"x/SCRIPT>

Пример

<SCRIPT TYPE="text/javascript">

var hiObject = new HotImage("picturel.jpg", "picture2.jpg","jspsHotImage.html", "_blank"); hiObject.putHere();

</SCRIPT>

Этот сценарий создает на Web-странице "горячее" изображение. Не правда ли, он короче, чем приведенный ранее пример?

Как создать простейшую анимацию из графических изображений?

Проблема

У меня есть несколько изображений, и я хочу создать на их основе простейшую анимацию. Как это сделать?

Решение

Ну, тут все просто: одно изображение очень быстро сменяет другое. Реализуется это с помощью приема, описанного ранее, и таймера, создаваемого с помощью метода setinterval объекта window, который мы рассмотрели в главе 5.

Пример

Далее приведен фрагмент HTML-кода Web-страницы, на которой реализована подобная простейшая анимация.

<IMG ID="img1" SRC="picturel.jpg"> <SCRIPT TYPE="text/javascript">

var imglObject = document.images["img1"];

var imagesArray = new Array("picturel.jpg", "picture2.jpg", "picture3.jpg", "picture4.jpg"); var imagelndex = 0; function changeImage() {

imglObject.src = imagesArray[imagelndex]; if (imagelndex >= imagesArray.length - 1)

imagelndex = 0 else

imagelndex++;

} var timer = window.setinterva1("changelmage();", 1000); </SCRIPT>

Для хранения интернет-адресов файлов, содержащих изображения-"кадры" нашего "фильма", мы создали массив imagesArray. Далее мы просто последовательно выбираем из этого массива один интернет-адрес за другим и загружаем в элемент страницы imgi соответствующие им изображения.

Народ замечает

Вообще, это не очень удачный способ создания анимации. Лучше использовать фильмы в формате "анимированный GIF" или Shockwave/Flash — для их воспроизведения не придется писать сценарий.

Как вывести на Web-страницу случайно выбранное изображение?

Проблема

Я собираюсь сделать на своем сайте баннерную систему. Как мне вывести на страницу произвольный баннер?

Решение

Здесь тоже все просто. Нужен только массив, содержащий интернет-адреса всех файлов, хранящих баннеры, и сценарий, вычисляющий псевдослучайное число, которое станет индексом элемента этого массива.

Пример

Далее приведен фрагмент HTML-кода страницы, выводящей на экран произвольное изображение.

<IMG ID="img1">

<SCRIPT TYPE="text/javascript">

var imagesArray = new Array("picture1.jpg", "picture2.jpg", "picture3.jpg", "picture4.jpg") ;

var imageIndex = Math.round(jspsGetRandom(0, imagesArray.length - 1));

var img1object = document.images["imgl"];

img1Object.src = imagesArray[imagelndex]; </SCRIPT>

Внимание!

Приведенный пример использует функцию jspsGetRandom, чье объявление представлено в листинге 1.18.

Народ советует

Поместите код, создающий массив с интернет-адресами файлов с баннерами, в отдельный файл сценариев. Так мы сможем изменить набор баннеров в нашей баннерной системе, не затрагивая код страниц, на которых они должны выводиться.