Браузер Microsoft Internet Explorer версии ниже 4, не поддерживает массив images.
В браузере рисунки рассматриваются как объекты image, а все рисунки, содержащиеся в текущем документе, помещаются в массив images, который можно использовать для обращения к любому рисунку, определяемому тегом <img>. В частности, можно динамически обновлять изображения, изменяя их свойство src. Примеров тому в интернете очень много. В частности и на этом сайте. Для начала приведем тег <img>, распишем полностью:
<img src="fileOrUrl"
[alt="altText"]
[lowsrc="fileOrUrl"]
[width=w]
[heigth=h]
[border=b]
[vspace=v]
[hspace=h]>
В атрибуте src содержится имя или адрес URL файла, который нужно вывести в документе. Рисунок должен храниться в формате GIF, JPEG, или PNG. С помощью атрибута alt задается альтернативный текст, появляющийся на экране: в момент загрузки текста, если пользователь заблокировал вывод изображений и поясняющая надпись под курсором мыши. Атрибут lowsrc, NN его поддерживает, IE - честно сказать не знаю, не пробовал, да и без надобности. Он позволяет предварительно выводить на экран изображение с низким разрешением. При этом рисунок загружается в два этапа. Атрибуты width (ширина) и height (высота) позволяют задать размеры рисунка в пикселах, атрибут border - ширину рамки в пикселах, а атрибуты vspace и hspace - размеры вертикального и горизонтального зазоров между границами изображения и другими элементами документа.
Для обращения к свойствам объекта image используется следующий синтаксис:
document.images[i].propertyName
где i - индекс элемента массива, который соответствует нужному рисунку. Первым рисунком в документе будет document.images[0]. Массив images является свойством объекта document, поэтому при обращении к рисунку необходим префикс document к имени массива. Тег <img> не имеет атрибута name, поэтому выражение вида "document.imgName" приведет к ошибке.
Свойства
Все свойства объектов image соответствуют атрибутам тега <img>, за исключением свойства complete. Эти свойства, кроме свойств src и lowsrc, значения которых могут быть изменены динамически, имеют значения только для чтения:
o src - соответствует атрибуту src тега <img>
o lowsrc - соответствует атрибуту lowsrc тега <img>
o height - соответствует атрибуту height тега <img>
o width - соответствует атрибуту width тега <img>
o border - соответствует атрибуту border тега <img>
o vspace - соответствует атрибуту vspace тега <img>
o hspace - соответствует атрибуту hspace тега <img>
o complete - содержит булево значение, которое указывает, загружен рисунок в браузер или нет (true - загружен, false - нет);
o type - для объектов image содержит значение "image".
Перед загрузкой рисунка появляется его рамка, внутри которой отображается строка, заданная в атрибуте alt (в версии 5 и выше IE, пользователь при желании может отключить рамки с alt-текстом отображаемые в момент загрузки рисунка). Рисунок можно изменять динамически, присваивая атрибуту src или lowsrc в качестве значения новый адрес URL (Честно говоря такое не применял, локально проверить это не удается, так как lowsrc загрузится мгновенно. А так, как такой способ считаю устаревшим - не пытался применить. Ошибок по крайней мере при применении этого атрибута не выдает.)
Методы и обработчики событий
Объект image не имеет методов.
Обработчики событий:
o onAbort - обработка события, возникающего при прерывании загрузки рисунка, т.е. при нажатии клавиши [Esc] или активизации новой гиперсвязи, в то время, когда рисунок загружается;
o onError - обработка события, связанного с ошибкой загрузки рисунка, т.е. когда невозможно найти рисунок по указанному адресу URL ;
o onLoad - соответствующее событие, инициализируется в начале загрузки рисунка. При загрузке анимированного GIF-а это событие возникает несколько раз и зависит от числа кадров анимационной последовательности.
Примеры
Данный пример позволяет обновить рисунок, нажав на кнопку формы. Не работает IE ниже 4-й версии и NN ниже 3-й версии.
Вот текст этой программы:
<IMG SRC="_picture.gif" BORDER=0 ALT="">
<hr noshade>
<form>
<input type="button" value = "Обновить рисунок" onClick="document.images[0].src='ind_1.gif'">
</form>
Как вы уже и успели заметить, происходит замена одного рисунка на другой. Куда это можно применить? Да и на моем сайте применено подобное для навигации, только события использованы OnMouseOver и OnMouseOut. Представляете, если использовать слои, плюс визуальные фильтры и это свойство с применением хитрой задумки можно такое сотворить! - Такое сотворить. . . Flash не нужно! ;) Можно применить например, для показа рисунков - типа галереи, - зачем грузить полностью документ, когда можно только рисунок, если конечно вы не разместили баннер и вам не выгодно, когда не перегружается страница. Еще пример? Достаточно. Кучу подобных примеров можно найти и в других разделах.
Объект link и массив links
Объект link (гиперсвязь) отображается как участок текста или графического объекта, щелчок миши на котором позволяет перейти к другому Web-ресурсу. Тег языка HTML, а мы помним, что рассматриваем объекты соответствующие тегам HTML, имеет следующий вид:
<a href=locationOrURL
[name="anchorName"]
[target="windowOrFrameName"]
[onClick="handlerText"]
[onMouseOver="handlerText"]>
linkText
</a>
Атрибут href определяет имя файла, или адрес URL для объекта, который загружается при активизации гиперсвязи. Атрибут name задает имя гиперсвязи, превращая ее в объект anchor (метку). С помощью атрибута target в определенный фрейм текущего фреймосодержащего документа можно загрузить документ, URL которого указан в значении атрибута href. Атрибут linkText представляет собой текст, отображаемый в HTML-документе как гиперсвязь, которая активизируется щелчком мыши. Для обращения к свойству объекта link используются выражения типа:
document.links[i].propertyName
где i - индекс данной связи в массиве гиперсвязей links текущего документа.
Масив links
В программе на языке JavaScript к гиперсвязям можно обращаться как к элементам массива links. Например, если в документе определены два тега < a href>, то в JS-программе к этим гиперсвязям можно обращаться с помощью выражений document.links[0] и document.links[1]. Синтаксис выражений для обращений к массиву links следующий:
o document.links[i]
o document.links.length
где переменная i - индекс гиперсвязи. Значением свойства length является количество гиперсвязей в текущем документе. Объекты link представляют собой объекты только для чтения, поэтому динамически изменять гиперсвязи в документе нельзя.
Свойства
Для объекта link определены следующие свойства:
o hash - задает имя метки в адресе URL, если она существует ;
o host - задает часть hostname:port адреса URL, определенного в гиперсвязи;
o hostname - задает имя хоста и домена (или IP-адрес) в адресе URL, определенном в гиперсвязи;
o href - задает полный адрес URL, определенный в гиперсвязи;
o pathname - задает часть адреса URL, которая описывает путь к документу и находится после части hostname:port;
o port - задает коммуникационный порт, который использует сервер;
o protocol - задает начало адреса URL, включая двоеточие, например http:;
o target - соответствует атрибуту target тега <a href>.
Массив links имеет всего одно свойство, length, значением которого является количество гиперсвязей в текущем документе.
Дата: 2019-02-25, просмотров: 188.
