Краткий курс HTML 5

8. Изображения

Для вставки в HTML-документ изображений предназначен непарный тег <img />, базовые возможности которого определяются следующими атрибутами:

src — относительный или абсолютный URI изображения (обязательный)
аlt — короткое описание (отображается при отключенной графике)
width и height — ширина и высота соответственно, в пикселях или процентах

В HTML 5, в отличие от предыдущей версии, атрибут alt не является обязательным, но рекомендуется к заполнению. Если не указаны ширина и высота, то картинка отобразится в оригинальном размере, либо, если графика в браузере отключена, то элемент примет такой размер, чтобы в него поместилась alt-надпись. Указав лишь один из этих атрибутов, вы получите изображение требуемой ширины или высоты с сохранением оригинальных пропорций. Для достижения точных размеров указывайте оба значения, но помните, что если заданные атрибуты не совпадают с оригиналом изображения, то масштабирование приведет к потере его качества.

<img src="elephant.jpg" alt="Слон африканский" width="320" height="240" />

Ширину и высоту можно задать как в пикселях, просто указав требуемое числовое значение, так и в процентах, добавив к нему знак «%». Во втором случае размер изображения будет просчитан браузером от размера родительского элемента, т. е. контейнера, в котором находится <img />.

Навигационная карта

Тег <img /> обладает еще двумя атрибутами, расширяющими его интерактивные возможности. Первый из них — булев атрибут ismap="ismap" — определяет изображение как навигационную карту (image map), обрабатываемую сервером. Имеет смысл использовать этот атрибут только тогда, когда изображение является гиперссылкой. После клика на нем мышкой, серверу отправляются координаты точки нажатия. Основываясь на полученных данных, сервер (при наличии соответствующего программного обеспечения) может произвести некоторые вычисления, направить вас на определенную веб-страницу и т. п. Это булев атрибут, поэтому его значение всегда совпадает с названием.

Атрибут usemap привязывает к изображению навигационную карту, заданную элементом <map> непосредственно в документе. В качестве значения присваивается имя карты с предшествующей ему решеткой (#). Например, если карта называется map1, то значение usemap будет выглядеть как #map1. Обратите внимание, что прописные и строчные буквы в данном атрибуте трактуются браузером как разные.

Сам элемент <map> — структурный, и позволяет с помощью геометрических объектов создавать навигационную карту, каждая зона которой является полноценной гиперссылкой. Конструкция заключается в тег <map> с единственным и обязательным атрибутом name, в котором указывается имя карты. Внутри <map> размещаются один или несколько тегов <area />, по одному на каждую зону. Элемент <area /> поддерживает все атрибуты гиперссылки <a> (href, hreflang, media, rel, target, type) и атрибут alt, содержащий короткое текстовое описание зоны. Для определения формы зоны предназначены атрибуты shape и coords, комбинации значений которых описаны в следующей таблице:

Форма зоныЗначение shapeЗначение coordsОписание для coords
Прямоугольникrectangleleft,top,right,bottomРасстояния от границ изображения
Кругcirclecenterx,centery,radiusКоординаты центра и радиус
Многоугольникpolygonx1,y1,x2,y2,..,xn,ynКоординаты вершин

Ниже приведен простой пример навигацинной карты:

<img src="planets.gif" alt="Планеты" usemap="#planetmap" />
<map name="planetmap">
   <area shape="rectangle" coords="0,0,82,126" href="sun.html" alt="Солнце" />
   <area shape="circle" coords="90,58,3" href="mercury.html" alt="Меркурий" />
   <area shape="circle" coords="124,58,8" href="venus.html" alt="Венера" />
</map>

Так этот пример выглядит в браузере (ссылки заменены):

Планеты Солнце Меркурий Венера

5 комментариев

Почему-то на многих ресурсах в теге img в конце слешь не ставится.
Не понятно нужен ли он в html5 или нет?

Артем @ 3 января 2014

Слэш ставится для совместимости с синтаксисом XML. Подробнее об этом написано во второй главе.

Алексей @ 3 января 2014

"Атрибут usermap привязывает к изображению навигационную карту"

не usermap, a USEMAP

Олена Юріївна @ 16 декабря 2014

Спасибо, исправил.

Алексей @ 16 февраля 2015

Спасибо за полезную и интересную статью!

Мария @ 21 мая 2015

Оставить комментарий