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


document.images[]
Netscape 3, а позже и Internet Explorer добавили в объект Document коллекцию images [ ], которая продолжает оставаться доступной в DOM. Очевидно, эта коллекция содержит объекты, связанные с изображениями, определенными дескрипторами <img> (X)HTML. Как и в случае других коллекций, свойство length дает возможность выяснить длину коллекции, а изображения могут быть доступны через эту коллекцию по номеру (document.images [0]) или по имени (document.images[ 'myimage' ] ). Доступный таким образом традиционный объект Image JavaScript поддерживает связанные с атрибутами (X)HTML свойства, включая border, height, hspace, lowsrc, name, src, vspace и width. Этот объект также поддерживает свойство complete, которое содержит логическое значение, указывающее, целиком ли загрузилось изображение. Объект DOM HTMLImageElement расширяет эту поддержку на все атрибуты (X)HTML с эквивалентными именами свойств, за исключением lowsrc, ismap, longdesc и usemap, которым отвечают, соответственно, lowSrc, isМар, longDesc и useMap.

Следующий простой пример демонстрирует возможности доступа к изображению

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Работа с изображениями</title>
<meta http-equiv="content-type" content="text/html; " />
<script type="text/javascript">
<!--
function showProps(theImage)
{
var prop, str="Свойства изображения\n\n";

str += "alt: "+theImage.alt + "\n";
str += "border: "+theImage.border + "\n";
str += "complete: "+theImage.complete + "\n";
str += "height: "+theImage.height + "\n";
str += "hspace: "+theImage.hspace + "\n";
// используйте lowsrc, а не lowSrc по причине отсутствия поддержки в IE6
str += "lowsrc: "+theImage.lowsrc + "\n";
str += "name: "+theImage.name + "\n";
str += "src: "+theImage.src + "\n";
str += "vspace: "+theImage.vspace + "\n";
str += "width: "+theImage.width + "\n";
alert(str);
}
//-->
</script>
</head>
<body>
<img src="image1.gif" alt="The Image" lowsrc="lowres.gif" id="testimage"
name="testimage" width="100" height="100" border="1" hspace="10" vspace="15" />
<br /><br />
<form action="#" method="get">
<input type="button" value="Показать свойства"
onclick="showProps(document.images['testimage']);" />
<input type="button" value="Заменить рисунок"
onclick="document.testimage.src='image2.gif';" />
<input type="button" value="Восстановить рисунок"
onclick="document.testimage.src='image1.gif';" />
</form>
</body>
</html>

Просмотреть

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


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


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

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


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







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