imageName.onabort = handlerFunction
imageName.onerror = handlerFunction
imageName.onkeydown = handlerFunction
imageName.onkeypress = handlerFunction
imageName.onkeyup = handlerFunction
imageName.onload = handlerFunction

Объект Image не имеет обработчиков для событий onClick, onMouseOut и onMouseOver. Однако, если Вы определите объект Area для изображения или поместите тэг IMG внутри объекта Link, Вы сможете использовать обработчики событий объектов Area или Link. Смотрите Link.

Описание

Позиция и размер изображения в документе устанавливается, когда документ отображается в web браузере и не могут быть изменены, используя JavaScript (свойства width и height только для чтения для этих объектов). Вы можете изменить изображение, которое отобразилось, устанавливая свойства src и lowsrc. (Смотрите описания Image.src и Image.lowsrc.)

Вы можете использовать JavaScript, чтобы создать анимацию с объектом Image, многократно устанавливая свойство src, как показано в Примере 4 ниже. Анимация JavaScript медленнее чем GIF анимация, потому что при GIF анимации вся анимация находится в одном файле; при анимации JavaScript, каждый кадр находится в отдельном файле, и каждый файл должен быть загружен через сеть (связаться с хостом и передать данные).

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

myImage = new Image()
myImage.src = "seaotter.gif"
...
document.images[0].src = myImage.src

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

Резюме Свойств

Резюме Методов

handleEvent
Вызывает обработчик для указанного события.

Примеры

Пример 1: Создает изображение тэгом IMG. Следующий код определяет изображение, используя тэг IMG:

<IMG NAME="aircraft" SRC="f15e.gif" ALIGN="left" VSPACE="10">

Следующий код обращается к изображению:

document.aircraft.src='f15e.gif'

Когда Вы обращаетесь к изображению по имени, Вы должны включить имя формы, если изображение находится в форме. Следующий код обращается к изображению, когда оно находится в форме:

document.myForm.aircraft.src='f15e.gif'

Пример 2: Создает изображение конструктором Image. следующий пример создает объект myImage типа Image, 70 пикселей в ширину и 50 пикселей в высоту. Если исходный URL, seaotter.gif, не имеет размерность 70x50 пикселей, он масштабируется к этому размеру.

myImage = new Image(70, 50)
myImage.src = "seaotter.gif"

Если Вы опускаете параметры ширины и высоты конструктора Image, myImage создается с размерностями, равными изображению, именованного в исходном URL.

myImage = new Image()
myImage.src = "seaotter.gif"

Пример 3: Отображает изображение, основываясь на вводе формы. В следующем примере, пользователь выбирает, какое изображение отобразить. Пользователь заказывает рубашку, заполняя форму. Отображаемое изображение зависит от цвета рубашки и размера, которые выбирает пользователь. Все возможные выборы изображения предварительно загружены, чтобы ускорить время срабатывания. Когда пользователь нажимает кнопку, чтобы заказать рубашку, функция allShirts показывает изображения всех рубашек.

<SCRIPT>
shirts = new Array()
shirts[0] = "R-S"
shirts[1] = "R-M"
shirts[2] = "R-L"
shirts[3] = "W-S"
shirts[4] = "W-M"
shirts[5] = "W-L"
shirts[6] = "B-S"
shirts[7] = "B-M"
shirts[8] = "B-L"

doneThis = 0
shirtImg = new Array()

// Предварительная загрузка изображений рубашек
for(idx=0; idx < 9; idx++) {
   shirtImg[idx] = new Image()
   shirtImg[idx].src = "shirt-" + shirts[idx] + ".gif"
}

function changeShirt(form)
{
   shirtColor = form.color.options[form.color.selectedIndex].text
   shirtSize = form.size.options[form.size.selectedIndex].text

   newSrc = "shirt-" + shirtColor.charAt(0) + "-" + shirtSize.charAt(0) + ".gif"
   document.shirt.src = newSrc
}

function allShirts()
{
   document.shirt.src = shirtImg[doneThis].src
   doneThis++
   if(doneThis != 9)setTimeout("allShirts()", 500)
   else doneThis = 0

   return
}

</SCRIPT>

<FONT SIZE=+2><B>Netscape Polo Shirts!</FONT></B>

<TABLE CELLSPACING=20 BORDER=0>
<TR>
<TD><IMG name="shirt" SRC="shirt-W-L.gif"></TD>

<TD>
<FORM>
<B>Цвет</B>
<SELECT SIZE=3 NAME="color" onChange="changeShirt(this.form)">
<OPTION> Красная
<OPTION SELECTED> Белая
<OPTION> Синяя
</SELECT>

<P>
<B>Размер</B>
<SELECT SIZE=3 NAME="size" onChange="changeShirt(this.form)">
<OPTION> Маленькая
<OPTION> Средняя
<OPTION SELECTED> Большая
</SELECT>

<P><INPUT type="button" name="buy" value="Покупайте Эту Рубашку!"
   onClick="allShirts()">
</FORM>

</TD>
</TR>
</TABLE>

Пример 4: Анимация JavaScript. Следующий пример использует JavaScript, чтобы создать анимацию объекта Image, многократно изменяя значение свойства src. Сценарий начинается с предварительной загрузки 10 изображений, которые составляют анимацию (image1.gif, image2.gif, image3.gif и так далее). Когда объект Image помещен в документ тэгом IMG, image1.gif отображается, и обработчик события onLoad начинает анимацию, вызывая функцию animate. Обратите внимание, что функция animate не вызывается собой после изменения свойства src объекта Image. Потому что когда свойство src изменяется, обработчик события onLoad изображения вызывается и вызывает функцию animate.

<SCRIPT>
delay = 100
imageNum = 1

// Предварительная загрузка изображений анимации
theImages = new Array()
for(i = 1; i < 11; i++) {
   theImages[i] = new Image()
   theImages[i].src = "image" + i + ".gif"
}

function animate() {
   document.animation.src = theImages[imageNum].src
   imageNum++
   if(imageNum > 10) {
      imageNum = 1
   }
}

function slower() {
   delay+=10
   if(delay > 4000) delay = 4000
}

function faster() {
   delay-=10
   if(delay < 0) delay = 0
}
</SCRIPT>

<BODY BGCOLOR="white">

<IMG NAME="animation" SRC="image1.gif" ALT="[Анимация]"
   onLoad="setTimeout('animate()', delay)">

<FORM>
   <INPUT TYPE="button" Value="Медленне" onClick="slower()">
   <INPUT TYPE="button" Value="Быстрее" onClick="faster()">
</FORM>
</BODY>

Смотрите так же примеры для обработчиков событий onAbort, onError и onLoad.

Смотрите также

Link, onClick, onMouseOut, onMouseOver

Свойства

border

Строка, определяющая ширину, в пикселях, рамки изображения.

Свойство объекта Image
Только для чтения
Реализовано в Navigator 3.0:

Описание

Свойство border отражает аттрибут BORDER тэга IMG. Для изображений, созданных конструктором Image, значение свойства border равно 0.

Примеры

Следующая функция показывает значение свойства border изображения, если оно не равно 0.

function checkBorder(theImage) {
   if (theImage.border==0) {
      alert('Изображение не имеет рамки!')
   }
   else alert('Рамка изображения равна ' + theImage.border)
}

complete

Булево значение, которое указывает завершил ли web браузер попытку загрузить изображение.

Свойство объекта Image
Только для чтения
Реализовано в Navigator 3.0:

Примеры

Следующий пример показывает изображение и три "радио" кнопки. Пользователь может нажимать "радио" кнопки, чтобы выбрать, которое изображение будет отображено. Щелчок другой кнопки позволяет пользователю увидеть текущее значение свойства complete.

<B>Выберите изображение:</B>
<BR><INPUT TYPE="radio" NAME="imageChoice" VALUE="image1" CHECKED
   onClick="document.images[0].src='f15e.gif'">F-15 Eagle
<BR><INPUT TYPE="radio" NAME="imageChoice" VALUE="image2"
   onClick="document.images[0].src='f15e2.gif'">F-15 Eagle 2
<BR><INPUT TYPE="radio" NAME="imageChoice" VALUE="image3"
   onClick="document.images[0].src='ah64.gif'">AH-64 Apache

<BR><INPUT TYPE="button" VALUE="Изображение загружено полностью?"
   onClick="alert('Значение свойства complete равно '
      + document.images[0].complete)">
<BR>
<IMG NAME="aircraft" SRC="f15e.gif" ALIGN="left" VSPACE="10"><BR>

Смотрите также

Image.lowsrc, Image.src

height

Строка, определяющая высоту изображения в пикселях.

Свойство объекта Image
Только для чтения
Реализовано в Navigator 3.0:

Описание

Свойство height отражает аттрибут HEIGHT тэга IMG. Для изображений, созданных конструктром Image, значение свойства height фактическая, не отображенная, высота изображения.

Примеры

Следующая функция показывает значения свойств height, width, hspace и vspace изображения.

function showImageSize(theImage) {
   alert('height=' + theImage.height+
      '; width=' + theImage.width +
      '; hspace=' + theImage.hspace +
      '; vspace=' + theImage.vspace)
}

hspace

Строка, определяющая поле в пикселях между левыми и правыми границами изображения и окружающим текстом.

Свойство объекта Image
Только для чтения
Реализовано в Navigator 3.0:

Описание

Свойство hspace отражает аттрибут HSPACE тэга IMG. Для изображений, созданных конструктором Image, значение свойства hspace равно 0.

Примеры

Смотрите примеры для свойства height.

lowsrc

Строка, определяющая URL версии изображения с низким разрешением, которое нужно отобразить в документе.

Свойство объекта Image
Реализовано в Navigator 3.0:

name

Строка, определяющая имя объекта.

Свойство объекта Image
Только для чтения
Реализовано в Navigator 3.0:

Защита

Navigator 3.0: Это свойство заражено по умолчанию. Для информации о заражении данных, смотрите "Защита JavaScript".

Описание

Представляет значение аттрибута NAME. Для изображений, созданных конструктором Image, значение свойства name равно null.

Примеры

В следующем примере, функция valueGetter использует цикл for, чтобы выполнить итерации над массивом элементов формы valueTest. Окно msgWindow отображает имена всех элементов в форме:

newWindow=window.open("http://home.netscape.com")

function valueGetter() {
   var msgWindow=window.open("")
   for (var i = 0; i < newWindow.document.valueTest.elements.length; i++) {
      msgWindow.document.write(newWindow.document.valueTest.elements[i].name + "<BR>")
   }
}

В следующем примере, первое выражение создает окно с именем netscapeWin. Второе выражение показывает значение "netscapeHomePage" в диалоговом окне Alert, так как "netscapeHomePage" это значение параметра windowName объекта netscapeWin.

netscapeWin=window.open("http://home.netscape.com","netscapeHomePage")
alert(netscapeWin.name)

prototype

Представляет прототип для этого класса. Вы можете использовать прототип, чтобы добавлять свойства или методы ко всем образцам класса. Для подробной информации, смотрите Function.prototype.

Свойство объекта Image
Реализовано в Navigator 3.0

src

Строка, определяющая URL изображения, которое нужно отобразить в документе.

Свойство объекта Image
Реализовано в Navigator 3.0:

Описание

Свойство src первоначально отражает аттрибут SRC тэга IMG . Установка свойства src начинает загрузку нового URL в область изображения (и прерывает передачу любых данных изображения, которые уже загружаются в эту же самую область). Следовательно, если Вы планируете изменить свойство lowsrc, Вы должны делать это перед установкой свойства src.

Если URL в свойстве src ссылается на изображение, которое не имеет такой же размер, как элемент изображения, в который оно загружено, исходное изображение масштабируется, чтобы соответствовать размеру элемента.

Когда Вы изменяете свойство src отображаемого изображения, новое изображение, которое Вы определяете, отображается в области, определенной для первоначального изображения. Например, объект Image первоначально показывает файл beluga.gif:

<IMG NAME="myImage" SRC="beluga.gif" ALIGN="left">

Если Вы установите myImage.src='seaotter.gif', изображение seaotter.gif будет масштабировано, чтобы соответствовать элементу, первоначально используемому beluga.gif, даже если seaotter.gif имеет не тот же самый размер как beluga.gif.

Вы можете изменять свойство src в любое время.

Примеры

Следующий пример показывает изображение и три "радио" кнопки. Пользователь может нажимать "радио" кнопки, чтобы выбрать, которое изображение будет отображено. Каждое изображение также использует свойство lowsrc, чтобы отобразить изображение с низким разрешением.

<SCRIPT>
function displayImage(lowRes,highRes) {
   document.images[0].lowsrc=lowRes
   document.images[0].src=highRes
}
</SCRIPT>

<FORM NAME="imageForm">
<B>Choose an image:</B>
<BR><INPUT TYPE="radio" NAME="imageChoice" VALUE="image1" CHECKED
   onClick="displayImage('f15el.gif','f15e.gif')">F-15 Eagle
<BR><INPUT TYPE="radio" NAME="imageChoice" VALUE="image2"
   onClick="displayImage('f15e2l.gif','f15e2.gif')">F-15 Eagle 2
<BR><INPUT TYPE="radio" NAME="imageChoice" VALUE="image3"
   onClick="displayImage('ah64l.gif','ah64.gif')">AH-64 Apache

<BR>
<IMG NAME="aircraft" SRC="f15e.gif" LOWSRC="f15el.gif" ALIGN="left" VSPACE="10"><BR>
</FORM>

Смотрите также

Image.complete, Image.lowsrc

vspace

Строка, определяющая поле в пикселях между верхними и нижними границами изображения и окружающим текстом.

Свойство объекта Image
Только для чтения
Реализовано в Navigator 3.0:

Описание

Свойство vspace отражает аттрибут VSPACE тэга IMG. Для изображений, созданных конструктором Image, значение свойства vspace равно 0.

Примеры

Смотрите пример для свойства height.

width

Строка, определяющая ширину изображения в пикселях.

Свойство объекта Image
Только для чтения
Реализовано в Navigator 3.0:

Описание

Свойство width отражает аттрибут WIDTH тэга IMG. Для изображений, созданных конструктором Image, значение свойства width фактическая, не отображаемая, ширина изображения.

Примеры

Смотрите пример для свойства height.

Методы

handleEvent

Вызывает обработчик для указанного события.

Метод объекта Image
Реализовано в Navigator 4.0:

Синтаксис

handleEvent(event)

Параметры

event
Имя события, для которого определенный объект имеет обработчик события.

Описание

Для информации об обработке событий, смотрите "Общая Информация о Событиях".

[Содержание] [Предыдущая] [Следующая] [Индекс]

Последняя Модификация: 10/31/97 12:31:11

Все мессаги сюда:yanich@inbox.ru

Объект client-side
Реализовано в	Navigator 3.0 Navigator 4.0: добавлен метод `handleEvent`

width	(Факультативный) Ширина изображения, в пикселях.
height	(Факультативный) Высота изображения, в пикселях.

`border`	Отражает аттрибут `BORDER`.
`complete`	Булево значение, указывающее, завершил ли web браузер попытку загрузить изображение.
`height`	Отражает аттрибут `HEIGHT`.
`hspace`	Отражает аттрибут `HSPACE`.
`lowsrc`	Отражает аттрибут `LOWSRC`.
`name`	Отражает аттрибут `NAME`.
`prototype`	Позволяет добавлять свойства к `Image`.
`src`	Отражает аттрибут `SRC`.
`vspace`	Отражает аттрибут `VSPACE`.
`width`	Отражает аттрибут `WIDTH`.

Свойство объекта	`Image`
Только для чтения
Реализовано в	Navigator 3.0:

Метод объекта	`Image`
Реализовано в	Navigator 4.0: