Работу с этим объектом мы уже рассматривали ранее (пример 12). Тогда мы использовали свойство src, которое давало возможность работать с адресом (именем графического файла). Использование этого свойства даёт возможность динамически менять изображение на страничке. Рассмотрим ещё один пример, в котором при наведении на гиперссылку, изменяется изображение, которое расположено рядом.
Пример 22 (Ex22\1.html)
В этом примере мы столкнемся с новым способом работы с объектом, а точнее говоря с его созданием . Вообще, объект отличается от других типов данных ещё и тем, что для его использования нужно создать экземпляр соответствующего класса объекта. При этом класс – это своего рода тип объекта, аналогичный типу переменной, а экземпляр – конкретный объект, с которым можно работать. Создаётся экземпляр объекта с помощью оператора new ; при этом ссылка на объект присваивается переменной. Ссылка (или указатель) отмечает место в памяти, где находится созданный экземпляр объекта. Используя ссылку, хранящуюся в переменной, мы модем обращаться к объекту.
Почему это рассматривается только сейчас? Потому, что раньше в создании экземпляра объектов не было необходимости. Дело в том, что объект window и объекты второго уровня всегда существуют, и при том только в одном экземпляре, поэтому их создание не требуется. А вот работа с остальными объектами зачастую требует предварительного создания их экземпляра.
Итак, перейдём к примеру. Возле гиперссылки, будет изображена одна из двух картинок, в зависимости от того, наведён ли указатель мыши на гиперссылку или нет. Таким образом необходимо создать два экземпляра изображения: один для изображения, которое будет отображено если указатель не на гиперссылке, второе – если указатель наведён на гиперссылку. Создаём экземпляры с помощью оператора new:
...
on = new Image();
off = new Image();
...
Для упрощения терминологии, будем говорить, что создан объект Image c именем on (отображается, если курсор наведён на гиперссылку ) и объект off (если курсор убран с гиперссылки).
Теперь можно работать с созданными объектами привычным нам образом. Итак, пусть объект on - это картинка с адресом 2.ico, объект off - - картинка с адресом 1.ico. За адрес изображения отвечает свойство src, поэтому установить соответствующие адреса картинкам можно следующим образом:
…
on.src = "2.ico";
off.src = "1.ico";
…
Отвлечёмся от кода и перейдём к созданию гиперссылок (например 3). Сначала вставляем на страницу изображение с именем img01, именем файла, соответствующего объекту off (т.е. изображение, если курсор не находится над гиперссылкой) и размерами 20x20:
<img name="img01" src="1.ico" WIDTH=20 HEIGHT=20 BORDER=0>
Теперь рядом создадим гиперссылку, для которой определены два события: onMouseOver и onMouseOut.
<a href="http://ваш_сайт/ваша_страница_1.html" onMouseOver="imgOn(img01)" onMouseOut="imgOff(img01)">Страница 1</a><br>
Как несложно догадаться, первое событие наступает, когда над гиперссылкой находиться указатель – для обработки этого события определена функция imgOn(img01). Заметим, что в качестве параметра передано имя расположенного рядом изображения. Второе событие наступает когда курсор покидает гиперссылку – для него определена функция imgOff(img01) (с тем же значением параметра).
Аналогичная ситуация и с остальными двумя гиперссылками (изменены только имена расположенных рядом изображений):
…
<img name="img02" src="1.ico" WIDTH=20 HEIGHT=20 BORDER=0>
<a href="http://ваш_сайт/ваша_страница_2.html" onMouseOver="imgOn(img02)" onMouseOut="imgOff(img02)">Страница 2</a><br>
<img name="img03" src="1.ico" WIDTH=20 HEIGHT=20 BORDER=0>
<a href="http://ваш_сайт/ваша_страница_3.html" onMouseOver="imgOn(img03)" onMouseOut="imgOff(img03)">Страница 3</a><br>
…
Таким образом, необходимо создать две функции: первая должна менять изображение с 1.ico на 2.ico. в картинке, имя которой передано в качестве параметра; вторая наоборот – меняет изображение с 2.ico на 1.ico.
...
function imgOn(imgName)
{ imgName.src = on.src;}
function imgOff(imgName)
{ imgName.src = off.src;}
...
В этих функциях у изображения, имя которого передано в качестве параметра, значение адреса присваивается адресу, который задан у объектов on.src и off.src.
Таким образом, если пользователь поместил указатель на вторую гиперссылку, наступило событие onMouseOver, которое вызвало функцию imgOn(img02) (на забываем, что img02 – это имя расположенного рядом изображения). В функции imgOn свойству src изображения img02 присвоено значение свойства src объекта on (изображение, отображаемое если курсор расположен над гиперссылкой). Таким образом, в изображение img02 (т.е. расположенное рядом с гиперссылкой) загрузится картинка 2.ico. Если пользователь убрал курсор со второй гиперссылки, наступившие событие onMouseOut вызовет функцию imgOff(img02), которая пор аналогии с уже рассмотренной загрузит в изображение img2 картинку 1.ico.
Как видно этот пример демонстрирует работу со свойством src. Рассмотрим ещё один пример:
Пример_23 (Ex23\1.html)
В этом примере при нажатии на кнопки мы увеличиваем или уменьшаем размер изображения. Очевидно, чтобы получить возможность работы с изображением необходимо использовать свойства width (ширина) и height (высота). Покажем, как это сделать:
function b(name)
{ w= name.width;
h=name.height;
name.width=w+10;
name.height=h+10;}
function m(name)
{ w= name.width;
h=name.height;
name.width=w-10;
name.height=h-10;}
Итак, есть две функции – одна реализует уменьшение изображения (функция m()), вторая увеличение (функция b()). Разберём функцию увеличения (вторая функция работает аналогично). Входным параметром функции b является имя объекта image. Используя это имя, мы переменной w присвоили значение высоты, а переменой h – значение высоты. Таким образом, переменные w и h содержат реальную ширину и высоту объекта image, имя которого мы указали при вызове функции. Теперь присвоим свойству width нашего объекта новое значение, которое равно предыдущему, увеличенному на 10. В результате ширина изображения увеличится на 10. Таким же образом увеличим высоту изображения на 10 единиц. В результате работы этой функции изображение будет увеличена на 10 в ширину и 10 в высоту.
Вторая функция работает аналогично, за исключением того, что происходит уменьшение высоты и ширины рисунка.
На этом работу с объектом изображение можно закончить. Конечно, если присмотреться к тегу вставки изображения, то можно выделить следующие свойства: border – с помощью этого свойства можно динамически изменять ширину рамки; свойство align –позволяет менять расположение изображения на странице; свойства Vspace и Hspace дают возможность менять расстояние от текста до изображения. Но навряд ли где-нибудь эти возможности найдут применения.
Вообще работа в JavaScript практически невозможна без использования внутренних объектов. К ним мы отнесли следующие объекты: array, string, date и math.