На главную страницу
Форум txt.version   




Статья :: 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="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


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

Свойство из

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="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="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

Только для чтения

Реализовано в

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

Image

страницы в данном разделе 
 ancor  applet
 area.htm  array
 Индекс  Boolean
 button  Checkbox
 Классы, Конструкторы и Методы Java  Значения Цветов
 Оглавление  Куки Netscape
 date.htm  document
 event  FileUpload
 form.htm  Frame
 Function  Обработчики Событий
 Hidden  History
 Image  Оглавление
 java.htm  JavaArray
 JavaClass  JavaObject
 JavaPackage  Приложение A. Зарезервированные Слова
 Layer  JSException
 JSObject  Plugin
 link.htm  Location
 math.htm  MimeType
 navigator  netscape
 Number  Object
 Объекты, Методы и Свойства  Операции
 Option  Packages
 Приложения  Справочник по Классам LiveConnect
 Элементы Языка  Объекты. Справочник.
 Password  Plugin
 Об Этой Книге  Radio
 RegExp  Reset
 screen  Select
 Операторы  String
 Style  Submit
 sun.htm  text.htm
 Textarea  toc.htm
 Свойства и Функции Верхнего Уровня  Новые Возможности в Этой Версии
 window   


Разделы
Околокомпьютерная литература (375)
Программирование (102)
Программы (75)
ОС и Сети (49)
Интернет (29)
Аппаратное обеспечение (16)
Базы данных (6)

Содержание сайта (выборка)
Apache
Протоколы TCP/IP (принципы, протоколы и архитектура)

PHP, PELR, JSP
PHP
JavaServer Pages (JSP)

Базы данных
Основы mysql
СУБД INFORMIX
СУБД POSTGRES
Основы проектирования реляционных баз данных

HTML, javascript
Спецификация HTML 4.01
Каскадные Таблицы Стилей, Уровень 2
Клиентский JavaScript. Справочник.
JavaScript руководство пользователя
Серверный JavaScript 1.4. Руководство по Использованию.

Паскаль, C, C++, C#
GCC (примеры)
FAQ Валентинa Озеровa DELPHI
C





 
©  programming-lang.com  справочник программиста