HTML
Карты изображений
Поиск…
Синтаксис
-
<img usemap="#[map-name]"> -
<map name="[map-name]"></map> -
<area>
параметры
| Tag / Атрибут | Значение |
|---|---|
<img> | Ниже приведены атрибуты изображения для отображения с помощью <img> . Применяются обычные атрибуты <img> . |
usemap | name карты с символом хеша, предшествующим ей. Например, для карты с name="map" изображение должно иметь usemap="#map" . |
<map> | |
name | Имя карты для ее идентификации. Используется с атрибутом usemap изображения. |
<area> | Ниже указаны атрибуты <area> . Когда указано href , если ссылка <area> a link, <area> также поддерживает все атрибуты тега привязки ( <a> ), кроме ping . См. Их в документах MDN . |
alt | Альтернативный текст для отображения, если изображения не поддерживаются. Это необходимо, только если href также установлен на <area> . |
coords | Координаты, определяющие выбранную область. Когда shape="polygon" , это должно быть установлено в список пар «x, y», разделенных запятыми (т. shape="polygon" coords="x1, y1, x2, y2, x3, y3, ..." ). Когда shape="rectangle" , это должно быть установлено left, top, right, bottom . Когда shape="circle" , это должно быть установлено в centerX, centerY, radius . |
href | URL-адрес гиперссылки, если указан. Если он опущен, то <area> не будет представлять гиперссылку. |
shape | Форма <area> . Может быть установлен по default , чтобы выбрать все изображение (нет coords не приписывать необходимости), circle или circ для окружности, rectangle или rect для прямоугольника и polygon или poly для многоугольной области , заданной угловыми точками. |
замечания
Список перечисленных выше параметров изменен из документов MDN:
<map>и<area>.Возможно создание координат карты изображения для изображения с более простыми формами (например, во вводном примере выше) с помощью редактора изображений, который показывает координаты (например, GIMP). Однако в общем случае проще использовать генератор карт изображений, например, этот .
Введение в карты изображений
Описание
Карты изображений - это изображение с интерактивными областями, которые обычно действуют как гиперссылки.
Изображение определяется тегом <img> , а карта определяется тегом <map> тегами <area> чтобы обозначать каждую зону, на которую можно щелкнуть. Используйте usemap и name для привязки изображения и карты.
Основной пример
Чтобы создать карту изображения, чтобы каждая из фигур на изображении ниже была нажата:
Код будет выглядеть следующим образом:
<img src="http://jaced.com/blogpix/2007/trisquarecircle/002.gif" usemap="#shapes">
<map name="shapes">
<area shape="polygon" coords="79,6,5,134,153,134">
<area shape="rectangle" coords="177,6,306,134">
<area shape="circle" coords="397,71,65">
</map>
Вы должны увидеть, что браузер распознает области, когда курсор становится указателем. См. Живую демонстрацию на JSFiddle или см. Демонстрацию ниже:
