HTML-изображения. Часть 2

Если пропустили прошлую статью, вот ссылка на нее:

HTML-изображения. Часть 1

Вставка изображений в HTML-документ

Содержание:
Часть 1.

1. Тег <img>

1.1. Адрес изображения

1.2. Размеры изображения

1.3. Форматы графических файлов

Часть 2.

2. Тег <map>

3. Тег <area>

4. Пример создания карты-изображения


2. Тег <map>

Тег <map> служит для представления графического изображения в виде карты с активными областями. Активные области определяются по изменению вида курсора мыши при наведении. Щелкая мышью на активных областях, пользователь может переходить к связанным документам.

Для тега доступен атрибут name, который задает имя карты. Значение атрибут name для тега <map> должно соответствовать имени в атрибуте usemap элемента <img>:

HTML
<img src="url" usemap="#имя_карты">
<map name="имя_карты">
...
</map>

Элемент <map> содержит ряд элементов <area>, определяющих интерактивные области в изображении карты.


3. Тег <area>

Тег <area> описывает только одну активную область в составе карты изображений на стороне клиента. Элемент не имеет закрывающего тега. Если одна активная область перекрывает другую, то будет реализована первая ссылка из списка областей.

HTML
<map name="имя_карты">
<area атрибуты>
</map>
ТАБЛИЦА 2. АТРИБУТЫ ТЕГА <AREA>
Структура таблицы следующая:
Атрибут - Краткое описание
  • alt - Задает альтернативный текст для активной области карты.
  • coords - Определяет позицию области на экране. Координаты задаются в единицах длины и разделяются запятыми:
    для круга — координаты центра и радиус круга;
    для прямоугольника — координаты верхнего левого и правого нижнего углов;
    для многоугольника — координаты вершин многоугольника в нужном порядке, также рекомендуется указывать последние координаты, равные первым, для логического завершения фигуры.
  • download - Дополняет атрибут href и сообщает браузеру, что ресурс должен быть загружен в момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например, предварительно открыть его (как PDF-файл). Задавая имя для атрибута, мы таким образом задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его значения.
  • href - Указывает URL-адрес для ссылки. Может быть указан абсолютный или относительный адрес ссылки.
  • hreflang - Определяет язык связанного веб-документа. Используется только вместе с атрибутом href. Принимаемые значения — аббревиатура, состоящая из пары букв, обозначающих код языка.
  • media - Определяет, для каких типов устройств файл будет оптимизирован. Значением может быть любой медиа-запрос.
  • rel - Дополняет атрибут href информацией об отношении между текущим и связанным документом. Принимаемые значения:
    alternate — ссылка на альтернативную версию документа (например, печатную форму страницы, перевод или зеркало).
    author — ссылка на автора документа.
    bookmark — постоянный URL-адрес, используемый для закладок.
    help — ссылка на справку.
    license — ссылка на информацию об авторских правах на данный веб-документ.
    next/prev — указывает связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности.
    nofollow — запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке.
    noreferrer — указывает, что переходе по ссылке браузер не должен посылать заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой страницы пришел посетитель сайта.
    prefetch — указывает, что целевой документ должен быть кэширован, т.е. браузер в фоновом режиме загружает содержимое страницы к себе в кэш.
    search — указывает, что целевой документ содержит инструмент для поиска.
    tag — указывает ключевое слово для текущего документа.
  • shape - Задает форму активной области на карте и ее координаты. Может принимать следующие значения:
    rect — активная область прямоугольной формы;
    circle — активная область в форме круга;
    poly — активная область в форме многоугольника;
    default — активная область занимает всю площадь изображения.
  • target - Указывает, куда будет загружен документ при переходе по ссылке. Принимает следующие значения:
    _self — страница загружается в текущее окно;
    _blank — страница открывается в новом окне браузера;
    _parent — страница загружается во фрейм-родитель;
    _top — страница загружается в полное окно браузера.
  • type - Указывает MIME-тип файлов ссылки, т.е. расширение файла.

4. Пример создания карты-изображения

1) Размечаем исходное изображение на активные области нужной формы. Координаты областей можно вычислить с помощью программы для обработки фотографий, например, Adobe Photoshop или Paint.

РИС. 1. ПРИМЕР РАЗМЕТКИ ИЗОБРАЖЕНИЯ ДЛЯ СОЗДАНИЯ КАРТЫ

2) Задаем имя карты, добавив его в тег <map> с помощью атрибута name. Это же значение присваиваем атрибуту usemap тега <img>.

3) Добавляем ссылки на веб-страницы или части веб-документа для каждой активной области, по которым пользователь будет переходить при нажатии курсором мыши на активную область изображения.

HTML
<img src="https://html5book.ru/wp-content/uploads/2014/12/flowers_foto.jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers">
<map name="flowers">
<area shape="circle" coords="70,164,50" href="https://ru.wikipedia.org/wiki/Гербера" alt="gerbera" target="_blank"> 
<area shape="poly" coords="191,13,240,98,143,98,191,13" href="https://ru.wikipedia.org/wiki/%C3%E8%E0%F6%E8%ED%F2" alt="hyacinth" target="_blank"> 
<area shape="circle" coords="318,93,50" href="https://ru.wikipedia.org/wiki/Ромашка" alt="camomiles" target="_blank"> 
<area shape="circle" coords="425,129,45" href="https://ru.wikipedia.org/wiki/Нарцисс_(растение)" alt="narcissus" target="_blank"> 
<area shape="rect" coords="480,3,572,89" href="https://ru.wikipedia.org/wiki/Тюльпан" alt="tulip" target="_blank"> 
</map>
РИС. 2. ПРИМЕР СОЗДАНИЯ КАРТЫ-ИЗОБРАЖЕНИЯ, ПРИ НАЖАТИИ КУРСОРА МЫШИ НА ЦВЕТОК ОСУЩЕСТВЛЯЕТСЯ ПЕРЕХОД НА СТРАНИЦУ С ОПИСАНИЕМ
Источник