Хитрый тег IMG: анатомия
Несмотря на то, что HTML — это язык разметки текста, редкий сайт обходится без картинок, а на некоторых их даже слишком много!
Картинки на страницу выводятся при помощи тега IMG, который кажется очень простым, и это впечатление часто подводит начинающих. На самом деле, IMG содержит много оасностей.
Анатомия IMG
Начнем с формального описания этой зловредной конструкции.
<IMG атрибуты>
Тег IMG одиночный, парного тега </IMG> не существует, следовательно, вся информация об источнике изображения, представлении, расположении и чувствительности картинки на экране задается атрибутами. В полном списке атрибутов я насчитал более 50 наименований! Чтобы как-то справиться с такой оравой, условно разделяю их на 5 групп:
- обязательные
- полезные
- дополнительные
- стилевые
- событийные
В приведенных ниже таблицах отсутствуют описания наиболее экзотических атрибутов, но, все равно, список получился очень большой. В графе описание проставлены пометки:
- IE — работает в браузере Microsoft
- NN — работает в браузере Netscape
Цифра, сопровождающая пометку, означает версию браузера.
Обязательные атрибуты
| атрибут | описание |
|---|---|
|
src=URL
|
|
|
height=пикселы
width=пикселы |
|
|
alt=текст
|
|
|
border=пикселы
|
|
Полезные атрибуты
| атрибут | описание | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
align=ключ
|
|
||||||||||||||||||
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:
Информация о языке может быть полезна:
|
dir=ключ
|
Задает направление вывода текста для атрибутов alt и title. Возможные ключи:
Задание значения rtl не означает, что браузер будет “переворачивать” надпись, но он будет знать, что текст написан справа налево (например на иврите). В IE-4, IE-5 при использовании ключа rtl не заметно никаких внешних проявлений. В NN-6 текст с атрибутом dir=rtl выравнивается по умолчанию по правому краю. |
id=идентификатор
|
Назначение уникального имени тегу. Может быть использован:
(хорошо работает в IE-4, IE-5 и NN-6, плохо в NN-4). |
name=идентификатор
|
Назначение имени тегу. Может быть использован в скриптах. Атрибуты id и name имеют одну и ту же область имен. |
language=ключ
|
Атрибут задает язык скрипта, если скрипт используется в теге. Возможные значения этого атрибута:
|
dynsrc=URL loop=число start=ключ controls |
Эти атрибуты используются в IE для показа видео в формате AVI. Атрибут dynsrc заменяет src. Он указывает адрес AVI-файла. Атрибут loop задает число циклов воспроизведения видеофайла (ключевое слово infinite или значение -1 заставляет производить показ бесконечно). Атрибут start имеет два ключевых значения:
Присутствие атрибута 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 |
взято отсюда: tnx « (полное ясное описание с примерами)