IMG - линейные изображения

Цель

Для включения изображения в документ.

Типичное отображение

Изображения представляются, как часть документа. Неграфические броузеры представляют вместо изображения значение признака ALT.

Позиционирование изображения обеспечивается признаками элемента IMG.

Основной синтаксис

<IMG SRC="URL" ALT="текст">

Возможные атрибуты

имя атрибута возможные значения смысл примечания
SRC URL адрес изображения обязателен; глядите примечания по графическому формату
ALT строка текстовое изложение изображения  
ALIGN TOP, MIDDLE, BOTTOM, LEFT, RIGHT позиционирование изображения касательно нынешней текстовой строки по умолчанию BOTTOM
HEIGHT целое высота в пикселях единственное предложение
WIDTH целое ширина в пикселях единственное предложение
BORDER целое ширина бордюра (рамки) в пикселях используется, когда элемент IMG возникает, как текст якоря; используйте BORDER=0 для подавления рамки
HSPACE целое ширина незаполненного пространства непринужденно слева и справа от изображения в пикселях значение по умолчанию - малое ненулевое число
VSPACE целое высота незаполненного пространства выше и ниже изображения в пикселях значение по умолчанию - малое ненулевое число
USEMAP URL фрагмент идентификатора для сайта заказчика с картой образа карты определены элементом MAP; имена карт - чувствительны к регистру комплекта символов
ISMAP ISMAP показывает, что изображение является картой образа, реагирующей на нажатие клавиши мыши когда пользователь "кликает" на изображении, данный признак обеспечивает передачу координат курсора серверу

Атрибутов HEIGHT, WIDTH, HSPACE, VSPACE, и USEMAP нет в HTML 2.0!

Признаки WIDTH и HEIGHT при совместном применении дозволяют программам просмотра зарезервировать место на экране для изображения еще до того, как они будут переданы по сети. Это разрешает пользователю начать чтение, пока передача данных еще продолжается. Эти признаки не предуготовлены для механического метаморфозы размера изображения броузерами. Правда некоторые броузеры могут масштабировать изображение в соответствии с признаками WIDTH и HEIGHT, не полагайтесь на это. Таким образом, они обязаны задавать реальный размер изображения. (Используйте подходящую программу для определения размеров в пикселях и масштабирования изображения, если это понадобится.)

Значения ALIGN имеют дальнейший толк:

ALIGN=TOP
Позиционирует верх изображения с верхом нынешней текстовой строки. Броузеры по различному интерпретируют это. Некоторые принимают во внимание то, что было на текстовой строке до изображения и игнорируют, что идет на строке позже него.
ALIGN=MIDDLE
Выравнивает середину изображения по стержневой текстовой строке.
ALIGN=BOTTOM (по умолчанию)
Выравнивает низ изображения по стержневой строке.
ALIGN=LEFT
Перемещает изображение к нынешнему левому краю, временно изменяя данный край так, дабы дальнейший текст переместился по правой стороны изображения. Отображение зависит от того, были ли выровненные по левому краю какой-либо текст либо ранее появившееся изображение до того, как в разметке возникло нынешнее изображение. Такой текст (но не изображения) обыкновенно принуждает выровненные по левому краю изображения смещаться на новую строку, с дальнейшим продолжением текста на бывшей строке.
ALIGN=RIGHT
Перемещает изображение к нынешнему правому краю, временно изменяя данный край так, дабы дальнейший текст переместился по левой стороны изображения. Отображение зависит от того, были ли выровненные по правому краю какой-либо текст либо ранее появившиеся изображения до того, как в разметке возникло нынешнее изображение. Такой текст (но не изображения) обыкновенно принуждает выровненные по правому краю изображения смещаться на новую строку с дальнейшим продолжением текста на бывшей строке.

Заметьте, что некоторые броузеры (скажем, Internet Explorer 2.0 и 3.0) вводят случайное расположение бесчисленных лево- и правовыровненных образов. Глядите BR о методах управления текстовым потоком.

Что касается ISMAP, приведем пример того, как дозволено его применять: 

<a href="/cgibin/navbar.map"><img src=navbar.gif ismap border=0></a>

Нажатые координаты передаются серверу. Броузер извлекает новейший URL из URL, специфицированного признаком HREF, с добавлением знака вопроса (?), координаты x, запятой (,) и координаты y локализации (координаты выражены в пикселях). Связь следует с применением теснее нового URL. Скажем, если пользователь нажал на участок с x=10, y=27, формируемый URL будет: "/cgibin/navbar.map?10,27". В совокупности, это отличная идея для подавления бордюра (применение признака BORDER=0) и обозначения того, что изображение реагирует на нажатие клавиши мыши.

Допустимый контекст

Текстовый контейнер, т.е. всякий элемент, тот, что может содержать текстовые элементы. Это включает множество элементов HTML.

Содержимое

Никакое.

Примеры

Пример IMG-1.html: 

<IMG SRC="Yucca.jpg" ALT="[Picture of Yucca]" WIDTH=110 HEIGHT=168> 
<P> 
<IMG SRC="Yucca.jpg" ALT="[Picture of Yucca]" WIDTH=110 HEIGHT=168 ALIGN=RIGHT> 
This is a simple example of embedding images. 
This paragraph should be displayed, in a graphical browser, 
with an image at the right, 
and before this paragraph the same image should appear 
separately, with default alignment. 
</P>

Используйте IMG с ISMAP, дабы сделать реагирующую на нажатие клавиши мыши карту:

Пример IMG-2.html: 

<A HREF="http://www.hut.fi/cgi-bin/imagemap/Pictures/English/english.map"> 
<IMG HEIGHT="400" WIDTH="400" 
SRC="http://www.hut.fi/Pictures/English/english.gif" 
ALT="Helsinki University of Technology" ISMAP>
</A>

Примечания

Смотрите всеобщее обсуждение изображений, формул и т.д., которое содержит добавочные примеры.

Если Вы хотите, дабы изображение возникло справа либо слева от текстового абзаца, Вы обязаны расположить элемент IMG в начале абзаца (P элемент). Впрочем при этом итог может Вас не устроить. Следственно отменной практикой стало иметь элемент BR с признаком CLEAR в конце такого абзаца.

Семантика и применение признака ALT пока ясно не определены. Дозволено рассматривать как рекомендации, обеспечение текстовых вставок в содержимое изображения для текстовых и речевых броузеров. Впрочем отменнее вставлять заголовки либо надписи рядом с изображением. Изредка сложно сказать, как отменнее дать пояснения к изображению в признаке ALT, потому что синтаксис лимитирован значениями, которые могут применяться в коде разметки HTML. Больше того, одни графические броузеры в обстановки, когда пользователь прекращает механическую загрузку изображения высвечивают значение ALT, другие - могут высветить только часть сгенерированного образа, которая немного что говорит. На эту тему A.Дж. Флавелл написал обширный документ Использование ALT текстов в IMG.