Конструктор 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
Результирующее изображение будет получено из кэша, а не загружено по сети, что значительно сэкономит время, необходимое для загрузки и декодирования изображения. Можно использовать эту технику для создания сложных анимаций или выводить одно из нескольких изображений на основе ввода данных в форму.
Свойство | Описание |
---|---|
| |
| Булево значение, указывающее, завершил ли браузер попытку загрузки изображения. |
| |
| |
| |
| |
| |
| |
|
Метод | Описание |
---|---|
|
Кроме того, этот объект наследует методы watch
и unwatch
из объекта
Object
.
Пример 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. Здесь создаётся объект
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="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="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
отражает атрибут 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
Булево значение, указывающее, завершил ли web-браузер попытку загрузки изображения.
Здесь выводится изображение и три радио-кнопки. Пользователь может щёлкать
радио-кнопки для выбора изображения для вывода. Щелчок по другой кнопке
позволяет пользователю увидеть текущее значение свойства
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="f15e.gif" ALIGN="left" VSPACE="10"><BR>
Image.lowsrc
, Image.src
Вызывает обработчик для специфицированного события.
handleEvent(event)
event | Имя события, для которого специфицированный объект имеет обработчик. |
Информацию об обработке событий см. в книге
Строка, специфицирующая высоту изображения в пикселах.
Свойство 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
отражает атрибут HSPACE
тэга
IMG
. Для изображений, созданных конструктором Image
,
значение свойства hspace
равно 0.
См. примеры для свойства height
.
Image.border
, Image.height
,
Image.vspace
, Image.width
Строка, специфицирующая URL версии изображения с низким разрешением, выводимой в документе.
Свойство lowsrc
первоначально отражает атрибут LOWSRC
тэга IMG
. Браузер загружает меньшее изображение, специфицированное свойством
lowsrc
, а затем замещает его изображением большего размера,
специфицированным в свойстве src
. Вы можете изменить свойство lowsrc
в любое время.
См. примеры для
свойства src
.
Image.complete
, Image.src
Строка, специфицирующая имя объекта.
JavaScript 1.1.
Это свойство разрушено/запорчено по умолчанию. О разрушении данных см. книгу
Представляет значение атрибута 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)
Строка, специфицирующая URL изображения, выводимого в документе.
Свойство 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
отражает атрибут VSPACE
тэга
IMG
. Для изображений. созданных конструктором Image
,
значение свойства vspace
равно 0.
См. примеры для свойства height
.
Image.border
, Image.height
,
Image.hspace
, Image.width
Строка, специфицирующая ширину изображения в пикселах.
Свойство width
отражает атрибут WIDTH
тэга IMG
.
Для изображений, созданных конструктором Image
, значение свойства
width
является реальной фактической, а не отображаемой, шириной изображения.
См. примеры для свойства height
.
Image.border
, Image.height
,
Image.hspace
, Image.vspace
Дата последнего обновления: 28 мая 1999 года.
Copyright (c) 1999