на главную
Язык разметки гипертекста HTML

Графические элементы

Элемент img вставляет изображение в текстовый поток. Закрывающего тега этот элемент не имеет.

У этого элемента есть один обязательный атрибут src и ряд необязательных (приведем основные).

src = url Адрес графического файла
alt = текст Альтернативный текст; "всплывает" при наведении курсора мыши на изображение; выводится в пустой рамке режиме браузера без загрузки графики
border = значение Толщина обрамляющей рамки в пикселах; 0 означает отсутствие рамки.
По умолчанию border=0, если изображение не является гиперссылкой, и border=2 в противном случае
height = значение Высота изображения в пикселах (по умолчанию оригинальная) или в процентах от высоты окна браузера
width = значение Ширина изображения в пикселах (по умолчанию оригинальная) или в процентах от ширины окна браузера
align = значение Выравнивание изображения по горизонтали или вертикали.
Значения texttop, abscenter, center, bottom, absbottom обеспечивают различные варианты вертикального выравнивания относительно текстовой строки; при применении этих значений вставленное изображение разрывает текстовый поток.
Если заданы значения left либо right, изображение соответствующим образом будет выровнено по горизонтали; задание этих значений обеспечивает обтекание изображения текстом
hspace = значение Свободное пространство слева и справа от изображения в пикселах
vspace = значение Свободное пространство сверху и снизу от изображения в пикселах
usemap = #имя Указывается имя карты (см. элемент map), задающей в данном изображении области, чувствительные к щелчку мыши
id, style, class, title, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, dir, lang необязательные атрибуты, описаны в разделе "Концепции HTML 4+".

Несмотря на то, что формально обязательным является только атрибут src, на практике обязательно следует указывать и альтернативный текст ( атрибут alt ), особенно если изображение представляет собой навигационный элемент. Ведь многие работают с браузером в режиме без загрузки изображений, особенно когда связь плохая, и документ загружается долго. К тому же, до сих пор существуют браузеры, не поддерживающие графики.

Значения атрибута border тоже лучше указывать явным образом, не полагаясь на умолчания. Умолчания у большинства браузеров такие: border=0 , если изображение не является зоной гиперссылки, и border=2 в противном случае. Таким образом, не указав явным образом значение border и задав гиперссылку, не удивляйтесь, появлению вокруг изображения рамки ( цвет ее тот же, что и у текстовых гиперссылок ).

Само наличие атрибутов height и width говорит о возможности масштабирования исходного изображения. Увеличивать исходное изображение бессмысленно, поскольку это всегда ведет к потере качества. Масштабирование изображений в сторону увеличения применяется в особых случаях, когда необходимо вывести цветные полосы либо прозрачные "распорки" строго определенной ширины и высоты. При этом достаточно изготовить изображение размером 1х1 пиксел (нужного цвета или прозрачное) и вставить в документ, задав необходимые размеры.

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