Wiki-учебник по веб-технологиям: JavaScript/ИзображенияВWebСтранице ...

Главная | Каталог |

Изображения в web-странице


Теперь мы рассмотрим объект, который является доступным начиная с JavaScript версии 1.1 (то есть с Netscape Navigator 3.0). С помощью Image-объекта вы можете изменять изображения на web-странице. Это позволяет нам например создавать мультипликации.

Пожалуйста обратите внимание, что пользователи более старых броузеров (типа Netscape Navigator 2.0 или Microsoft Internet Explorer 3.0 – они используют JavaScript 1.0) не смогут выполнять сценарии, показанные в этой части – или по крайней мере они не смогут увидеть эффект в полной мере.

Сначала давайте посмотрим, как могут быть адресованы изображения в web-страницы через JavaScript. Все изображения представляются через массив. Этот массив назван images. Это свойство document-объекта. Каждое изображение на web-странице получает номер. Первое изображение получает номер 0, второе изображение получает номер 1 и так далее. Так что мы можем адресовать первое изображение через document.images[0].

Каждое изображение в HTML-документе рассматривается, как Image-объект. Image-объект имеет некоторые свойства, к которым можно обращаться через JavaScript. Вы можете например видеть, какой размер имеет изображение с свойствами width и height.document.images[0].width дает вам ширину (в пикселях) первого изображения на web-странице.

Особенно, если у вас много изображений на одной странице, становит тяжело вести счет всех изображений. Эту проблему решает предоставление имен различным изображениям. Если вы объявляете изображение с этим тегом:

<img src="img.gif" name="myImage" width=100 height=100>


Вы можете адресовать его через document.myImage или document.images["myImage"]