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.
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>
Источник ↗