Хитрый тег IMG: анатомия

Несмотря на то, что HTML — это язык разметки текста, редкий сайт обходится без картинок, а на некоторых их даже слишком много!

Картинки на страницу выводятся при помощи тега IMG, который кажется очень простым, и это впечатление часто подводит начинающих. На самом деле, IMG содержит столько опасностей, что отправляться с ним в Интернет можно лишь с надежным лоцманом которым, отбросив ложную скромность, конечно, являюсь я, Иван Сидоров!

Анатомия IMG

Начнем с формального описания этой зловредной конструкции.

<IMG атрибуты>

Тег IMG одиночный, парного тега </IMG> не существует, следовательно, вся информация об источнике изображения, представлении, расположении и чувствительности картинки на экране задается атрибутами. В полном списке атрибутов я насчитал более 50 наименований! Чтобы как-то справиться с такой оравой, условно разделяю их на 5 групп:

обязательные
полезные
дополнительные
стилевые
событийные

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

IE — работает в браузере Microsoft
NN — работает в браузере Netscape

Цифра, сопровождающая пометку, означает версию браузера.

Обязательные атрибуты

атрибут	описание
src=URL	Значение этого атрибута — URL (адрес) файла-изображения. Например, запись <IMG src=pic.gif> указывает браузеру, что файл следует искать в текущем каталоге (то есть, там, где расположена страничка, содержащая этот `IMG`). Пример
height=пикселы width=пикселы	Эти атрибуты задают браузеру размер прямоугольника, в который он должен вывести картинку. Пример
alt=текст	Атрибут содержит текст, который браузер выводит вместо изображения, если графика не поддерживается, или показывает в виде подсказки, когда пользователь размещает над изображением мышиный курсор. Голосовые браузеры зачитывают этот текст. В NN-3 и NN-4 `alt`-текст не записывается на экран, если картинки нет в каталоге. В NN-6 `alt`-текст не показывается при наезде на картинку мышиным курсором. Подсказка появляется, если она задана атрибутом `title`. Если картинки в каталоге нет, NN-6 записывает `alt`-текст на экран, рисуя при этом рамку изображения только на время загрузки изображения. Пример
border=пикселы	Атрибут задает толщину прямоугольной рамки, которая окружает изображение. Чаще всего используют нулевое значение: `border=0`. Пример

Полезные атрибуты

атрибут описание

align=ключ

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

1) Выравнивание по вертикали относительно текста.

`top`	Верх картинки выровнен относительно верха текущей строки.
`texttop`	Практически то же, что top, но работает не во всех браузерах.
`middle`	Центр картинки выровнен относительно базовой линии строки (линия, на которой стоят буквы, опуская хвостики за нее вниз). В NN-6 выравнивание происходит относительно середины текста текущей строки.
`absmiddle`	Центр картинки выровнен относительно середины текста текущей строки. Работает, как описано только в IE-4, IE-5. В NN-4 работает подобно значению `middle`.
`bottom`	Низ картинки выровнен по базовой линии строки.
`baseline`	Практически то же, что `bottom`, но работает не во всех браузерах.
`absbottom`	Низ картинки выровнен по нижнему краю самого глубокого символа (хвостика). Работает, как описано только в IE-4, IE-5 и NN-6. В NN-4 работает подобно значению `bottom`.

2) Перемещение изображения к текущему левому или правому краю.

`left`	Картинка выравнивается по левому краю, а текст обтекает картинку справа.
`right`	Картинка выравнивается по правому краю, а текст обтекает картинку слева.

Пример

hspace=пикселы
vspace=пикселы

Эти атрибуты определяют свободное пространство слева и справа (hspace), над и под (vspace) картинкой.

Пример

title=текст

Снабжает тег примечаниями. Работает в IE-4, IE-5 и NN-6. Если в IMG одновременно заданы alt и title, то браузеры IE-4, IE-5 и NN-6 в качестве выпадающей подсказки используют значение атрибута title, а если картинка не загружена, то на ее место пишут на экран содержимое alt (при этом NN-6 не рисует рамку для картинки).

Пример

Дополнительные атрибуты

атрибут	описание
lowsrc=URL	Значение этого атрибута — URL (адрес) файла-изображения, которое загружается на страницу в первую очередь. Обычно это изображение существенно меньше по килобайтному размеру основной картинки и представляет собой вариант основной картинки с меньшим разрешением или черно-белую копию. После того, как основное изображение загружено, оно заменяет на экране картинку, заданную атрибутом `lowsrc`. При этом размеры, заданные атрибутами `height` и `width`, относятся к обоим картинкам одновременно. Работает только в NN. Не рекомендуется к использованию. Для больших изображений лучше применять чересстрочную развертку.
lang=ключ	Атрибут задает язык текста `alt` и `title`. Примеры ключевых слов для `lang`: `fr` — французский `de` — немецкий `it` — итальянский `nl` — голландский `el` — греческий `es` — испанский `pt` — португальский `ar` — арабский `he` — иврит `ru` — русский `zh` — китайский `ja` — японский `hi` — хинди `ur` — урду `sa` — санскрит Информация о языке может быть полезна: Поисковым машинам. Помощь синтезаторам речи. Помощь браузерам для выбора варианта глифов (начертаний символов) шрифта. Помощь браузеру для выбора типа кавычек. Помощь браузеру в вопросах переноса, лигатур и интервалов. Помощь программам проверки грамматики и орфографии.
dir=ключ	Задает направление вывода текста для атрибутов alt и title. Возможные ключи: `ltr` — слева направо (по умолчанию) `rtl` — справа налево Задание значения `rtl` не означает, что браузер будет “переворачивать” надпись, но он будет знать, что текст написан справа налево (например на иврите). В IE-4, IE-5 при использовании ключа `rtl` не заметно никаких внешних проявлений. В NN-6 текст с атрибутом `dir=rtl` выравнивается по умолчанию по правому краю. Пример
id=идентификатор	Назначение уникального имени тегу. Может быть использован: как метка стилевого CSS-определения как метка якоря гипертекстовой ссылки как имя тега в скриптах Пример (хорошо работает в IE-4, IE-5 и NN-6, плохо в NN-4).
name=идентификатор	Назначение имени тегу. Может быть использован в скриптах. Атрибуты `id` и `name` имеют одну и ту же область имен.
language=ключ	Атрибут задает язык скрипта, если скрипт используется в теге. Возможные значения этого атрибута: `javascript` — JavaScript (по умолчанию) `jscript` — JavaScript `vbscript` — VBScript (только IE) `vbs` — VBScript (только IE) Пример
dynsrc=URL loop=число start=ключ controls	Эти атрибуты используются в IE для показа видео в формате AVI. Атрибут `dynsrc` заменяет `src`. Он указывает адрес AVI-файла. Атрибут `loop` задает число циклов воспроизведения видеофайла (ключевое слово `infinite` или значение `-1` заставляет производить показ бесконечно). Атрибут `start` имеет два ключевых значения: `fileopen` — воспроизводить файл сразу после загрузки `mouseover` — воспроизводить файл после того, как мышиный курсор будет расположен над областью просмотра Присутствие атрибута `controls` (у него нет значений) приводит к появлению под изображением кнопок управления. Пример не приводится в силу большого объема AVI-файлов.
usemap=URL	Задает URL (адрес) map-файла с гипертекстовой разметкой картинки или ссылку на имя тега `<MAP name=имя>` (в формате `usemap=#имя`). Пример
ismap	Этот атрибут указывает, что изображение является серверной графической картой. Действия пользователя мышкой, выполняемые над картинкой, передаются для обработки на сервер. HTML-код, ссылающийся на серверный файл, может выглядеть так: <A href=cgi-bin/imagemap/file.map ><IMG src=./pic.gif height=200 width=200 alt="Графическое меню сайта" ismap></A>

Стилевые атрибуты

атрибут	описание
style=стили	Атрибут служит для назначения картинки стилей CSS. Стили для тега `IMG` хорошо работают в IE-4, IE-5 и NN-6, но с ошибками в NN-4. Пример
class=класс	Атрибут назначает имя (или имена) стилевого класса CSS. Стили для тега `IMG` хорошо работают в IE-4, IE-5 и NN-6, но с ошибками в NN-4. Пример

Событийные атрибуты

атрибут	описание
onabort=скрипт	Событие наступает, когда пользователь прекращает загрузку элемента кнопкой “Остановить”. NN-3, NN-4, IE-4, IE-5 Пример
onclick=скрипт	Событие происходит, когда по элементу щелкают мышью. IE-4, IE-5, NN-6 Пример
ondblclick=скрипт	Событие происходит, когда по элементу производится двойной щелчок. IE-4, IE-5, NN-6 Пример
ondragstart=скрипт	Событие наступает, когда пользователь начинает перетаскивать элемент. IE-4, IE-5 Пример
onload=скрипт	Событие происходит, когда заканчивается загрузка документа. IE-4, IE-5, NN-3, NN-4 Пример
onmousedown=скрипт	Событие происходит, когда нажимается кнопка мыши. IE-4, IE-5, NN-4, NN-6 Пример
onmouseup=скрипт	Событие происходит, когда отпускается нажатая кнопка мыши. IE-4, IE-5, NN-4, NN-6 Пример
onmouseout=скрипт	Событие происходит, когда курсор мыши уходит с элемента. IE-4, IE-5, NN-6 Пример
onmouseover=скрипт	Событие происходит, когда курсор мыши заходит на элемент. IE-4, IE-5, NN-6 Пример
onmousemove=скрипт	Событие происходит, когда перемещается курсор мыши. IE-4, IE-5, NN-6 Пример
onresize=скрипт	Событие происходит, когда меняются размеры элемента. IE-4, IE-5 Пример

Иван Сидоров kurs@robotland.pereslavl.ru