Хитрый тег 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 Картинка выравнивается по правому краю, а текст обтекает картинку слева.

 

Полезное не в НФЛ

:

Интерестное


Блог Евгения Синичкина


Блог "Student Talking" А. Соловьева


Статьи и Интервью



 


© NFL24.RU | 2011.
Использование материалов сайта NFL24.ru возможно при ссылке на сайт NFL24.ru (для интернет-изданий обязательно размещение активной гиперссылки).
Официальные сайты команд NFL
/chitriy-teg-img.html
rss
Карта