Книги-online

Главная Текущий раздел

Image Оглавление | Назад | Вперёд | Индекс

Image

Изображение в HTML.

Клиентский объект

Реализован в

JavaScript 1.1

JavaScript 1.2: добавлен метод handleEvent.

Создание

Конструктор Image или тэг IMG.

Машина выполнения JavaScript создаёт объект Image для каждого тэга IMG в документе. Она помещает эти объекты в массив в свойстве document.images. Вы получаете доступ к объекту Image по индексу в этом массиве.

Для определения тэга IMG используйте стандартный синтаксис HTML с добавлением обработчиков событий JavaScript. При специфицировании атрибута NAME можно использовать это имя при индексации массива images.

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

new Image([width,] [height])

Параметры

width	Ширина изображения в пикселах.
height	Высота изображения в пикселах.

Обработчики событий

Для определения обработчика события для объекта Image, созданного конструктором Image, установите соответствующее свойство объекта. Например, если у Вас имеется объект Image по имени imageName и Вы хотите установить в один из его обработчиков событий функцию handlerFunction, используйте один из следующих операторов:

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 являются для данного объекта read-only). Вы можете изменить выводимое изображение, установив свойства 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

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

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

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

Методы. Резюме.

Метод	Описание
handleEvent	Вызывает обработчик для специфицированного события.

Кроме того, этот объект наследует методы watch и unwatch из объекта Object.

Примеры

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

<IMG NAME="aircraft" src="books/javascript/javascript_13/f15e.gif" ALIGN="left" VSPACE="10">

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

document.aircraft.src='f15e.gif'

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

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

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

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

Если Вы опускаете аргументы width и height в конструкторе 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="books/javascript/javascript_13/shirt-W-L.gif"></TD>

<TD>
<FORM>
<B>Color</B>
<SELECT SIZE=3 NAME="color" onChange="changeShirt(this.form)">
<OPTION> Red
<OPTION SELECTED> White
<OPTION> Blue
</SELECT>

<P>
<B>Size</B>
<SELECT SIZE=3 NAME="size" onChange="changeShirt(this.form)">
<OPTION> Small
<OPTION> Medium
<OPTION SELECTED> Large
</SELECT>

<P><INPUT type="button" name="buy" value="Buy This Shirt!"
   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="books/javascript/javascript_13/image1.gif" ALT="[Animation]"
   onLoad="setTimeout('animate()', delay)">

<FORM>
   <INPUT TYPE="button" Value="Slower" onClick="slower()">
   <INPUT TYPE="button" Value="Faster" onClick="faster()">
</FORM>
</BODY>

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

См. также

Link, onClick, onMouseOut, onMouseOver

border

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

Свойство из	Image
Только для чтения
Реализовано в	JavaScript 1.1

Описание

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

Пример

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

function checkBorder(theImage) {
   if (theImage.border==0) {
      alert('The image has no border!')
   }
   else alert('The image's border is ' + theImage.border)
}

См. также

Image.height, Image.hspace, Image.vspace, Image.width

complete

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

Свойство из	Image
Только для чтения
Реализовано в	JavaScript 1.1

Пример

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

<B>Choose an image:</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="Is the image completely loaded?"
   onClick="alert('The value of the complete property is '
      + document.images[0].complete)">
<BR>
<IMG NAME="aircraft" src="books/javascript/javascript_13/f15e.gif" ALIGN="left" VSPACE="10"><BR>

См. также

Image.lowsrc, Image.src

handleEvent

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

Метод из	Image
Реализован в	JavaScript 1.2

Синтаксис

handleEvent(event)

Параметр

event

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

Описание

Информацию об обработке событий см. в книге Клиентский JavaScript. Руководство..

height

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

Свойство из	Image
Только для чтения
Реализовано в	JavaScript 1.1

Описание

Свойство 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)
}

См. также

Image.border, Image.hspace, Image.vspace, Image.width

hspace

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

Свойство из	Image
Только для чтения
Реализовано в	JavaScript 1.1

Описание

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

Примеры

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

См. также

Image.border, Image.height, Image.vspace, Image.width

lowsrc

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

Свойство из	Image
Реализовано в	JavaScript 1.1

Описание

Свойство lowsrc первоначально отражает атрибут LOWSRC тэга IMG. Браузер загружает меньшее изображение, специфицированное свойством lowsrc, а затем замещает его изображением большего размера, специфицированным в свойстве src. Вы можете изменить свойство lowsrc в любое время.

Примеры

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

См. также

Image.complete, Image.src

name

Строка, специфицирующая имя объекта.

Свойство из	Image
Только для чтения
Реализовано в	JavaScript 1.1

Безопасность

JavaScript 1.1. Это свойство разрушено/запорчено по умолчанию. О разрушении данных см. книгу Клиентский 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 argument окна netscapeWin.

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

src

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

Свойство из	Image
Реализовано в	JavaScript 1.1

Описание

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

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

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

<IMG NAME="myImage" src="books/javascript/javascript_13/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="books/javascript/javascript_13/f15e.gif" LOWsrc="books/javascript/javascript_13/f15el.gif" ALIGN="left" VSPACE="10"><BR>
</FORM>

См. также

Image.complete, Image.lowsrc

vspace

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

Свойство из	Image
Только для чтения
Реализовано в	JavaScript 1.1

Описание

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

Примеры

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

См. также

Image.border, Image.height, Image.hspace, Image.width

width

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

Свойство из	Image
Только для чтения
Реализовано в	JavaScript 1.1

Описание

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

Примеры

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

См. также

Image.border, Image.height, Image.hspace, Image.vspace Оглавление | Назад | Вперёд | Индекс

Дата последнего обновления: 28 мая 1999 года.
Copyright (c) 1999 Netscape Communications Corporation