Добавляем...


Объекты Image
Свойства объекта Image соответствуют, как и следует ожидать, атрибутам дескриптора <img>, определенным стандартами (X)HTML. Описания дополнителыїм свойств объекта Image, выходящих за рамки типичных свойств id, className, style, title, а также свойств, присущих всем объектам DOM1, представлены в таблице.

Таблица Свойства объекта image
Свойство Описание
align Указывает параметры выравнивания изображения, обычно "left" или "right"
alt Альтернативный текст, заданный для изображения с помощью атрибута alt
border Ширина рамки вокруг изображения, заданная в пикселях
complete Нестандартное (но имеющее широкую поддержку) логическое значение, указывающее, завершена / загрузка изображения
height Высота изображения в пикселях или в процентах
hspace Пространство по горизонтали вокруг изображения в пикселях
isMap Логическое значение, указывающее присутствие атрибута ismap, характеризующее изображение графическую карту ссылок. Сегодня чаще используется свойство useMap
longDesc Значение атрибута longdesc (X)HTML, обеспечивающего более подробное описание изображени чем атрибут alt
lowSrc Адрес URL "исходного" изображения, заданный атрибутом lowsrc. В ранних браузерах задавался свойством lowsrc
name Значение атрибута name изображения
src Адрес URL изображения
useMap Адрес URL графической карты ссылок клиента, когда дескриптор <img> имеет атрибут usemap
vspace Пространство по вертикали вокруг изображения в пикселях
width Ширина изображения в пикселях или в процентах

Традиционный объект Image поддерживает также обработчики событий оnabort, onerror и onload. Обработчик onabort вызывается тогда, когда пользователь прерывает загрузку изображения с помощью щелчка на кнопке Остановить браузера. Обработчик onerror срабатывает тогда, когда в процессе загрузки изображени возникает ошибка. Обработчик onload реагирует на окончание загрузки изображения. В современных браузерах, должным образом поддерживающих (X)HTML, вы обнаружите также поддержку onmouseover, onmouseout, onclick и других типи событий, предусмотренных для Image.
Следующий пример иллюстрирует использование типичных событий объекта Image.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Проверка объекта Image JavaScript</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
</head>
<body>
<img src="sample.gif" width="200" height="100" name="imagel" id="imagel" align="left" alt="Тестируемое изображение" border="0" />
<br clear="all" />
<hr />
<br clear="all" />
<h1>Свойства объекта Image</h1>
<form name="imageForm" id="imageForm" action="#" method="get">

left:
<input type="radio" name="align" id="alignleft" value="left" checked="checked" onchange="document.images.imagel.align=this.value" />

right:
<input type="radio" name="align" id="alignright" value="right" onchange="document.images.imagel.align=this.value" />
<br />

alt:
<input type="text" name="alt" id="alt" ochange="document.images.imagel.alt=this.value" />
<br />

border:
<input type="text" name="border" id="border" onchange="document.images.imagel.border=this.value" />
<br />

complete:
<input type="text" name="complete" id="complete" />
<br />

height:
<input type="text" name="height" id="height" onchange="document.images.imagel.height=this.value" />
<br />

hspace:
<input type="text" name="hspace" id="hspace" onchange="document.images.imagel.hspace=this.value" />
<br />

name:
<input type="text" name="name" id="name" />
<br />

src:
<input type="text" name="src" id="src" size="40" onchange="document.images.imagel.src=this.value" />
<br />

vspace:
<input type="text" name="vspace" id="vspace" onchange="document.images.imagel.vspace=this.value" />
<br />

width:
<input type="text" name="width" id="width"
onchange="document.images.imagel.width=this.value" />
</form>

<script type="text/javascript">
<!--
function populateForm()
{
if (document.images && document.images.imagel &&
document.images.imagel.complete)
{
with (document.imageForm)
{
var і = document.images.imagel;
alt.value = i.alt;
border.value m i.border;
complete.value = i.complete;
height.value = i.height;
hspace.value = i.hspace;
name.value = i.name;
src.value = i.src;
vspace.value = i.vspace;
width.value = i.width;
}
}
}
window.onload = populateForm;
//-->
</script>
</body>
</html>

Обратите внимание на то, что в предыдущем примере можно динамически изменять значение свойства src изображения. На этом основано наше первое прилож объекта Image — вездесущая сегодня кнопка с изменяемым изображением.
назад: Изображения
далее:


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика