Тег <area> - это настоящий «инструмент», который позволяет превратить обычную картинку в интерактивную карту с кликабельными зонами. Вы можете задавать этим областям любые формы и размеры, делая навигацию по изображению невероятно гибкой. Важно понимать: если области перекрываются, приоритет получает та, что идет первой в коде. Это простое правило помогает избежать путаницы и ошибок взаимодействия. Обратите внимание: элемент <area> не существует сам по себе - он всегда работает в связке с тегом <map>, являясь его прямым потомком. Ключевые атрибуты - alt:
- Здесь вы указываете запасной текст. Он появится на экране, если изображение по какой-то причине не загрузится (из-за слабого интернета или ошибки в пути). Это важный элемент доступности и UX!
- coords:
- Этот атрибут точно определяет «географию» активной зоны на карте. В паре с
shape он задает форму, размер и расположение области. Возможные форматы координат: - x1,y1,x2,y2 - координаты противоположных углов прямоугольника (при
shape="rect").
Определение координат для прямоугольника (shape="rect"): - x,y,радиус - центр круга и его радиус (при
shape="circle").
Определение координат для окружности (shape="circle"): - x1,y1,x2,y2,...,xn,yn - вершины многоугольника (при
shape="poly").
Определение координат для многоугольника (shape="poly"): Примечание: точка отсчета всегда начинается с верхнего левого угла - координаты 0,0. - href:
- Указывает URL-адрес, на который ведет ссылка. Если этот атрибут отсутствует или пустой, то область просто не будет кликабельной ссылкой. (адрес может быть либо либо )
- hreflang:
- Содержит двухбуквенный код языка целевой страницы. Это полезно для поисковых систем и пользователей, но работает только вместе с
href. - media:
- Позволяет указать тип устройства или контекст просмотра (например, мобильное устройство, принтер). Атрибут принимает несколько значений и обязателен для использования в связке с
href. - rel:
- Определяет семантическую связь между текущей страницей и целевой. Вот основные варианты:
- alternate - альтернативная версия документа (например, для печати).
- author - ссылка на автора материала.
- bookmark - постоянный URL для закладок.
- help - ссылка на справочную документацию.
- license - информация об авторских правах.
- next - следующий элемент в серии.
- nofollow - сигнал поисковым ботам не индексировать переход («nofollow» используется в Google, чтобы указать, что поисковый бот не должен переходить по этой ссылке).
- noreferrer - запрет браузеру отправлять HTTP-заголовок при переходе.
- prefetch - рекомендация кэшировать целевой документ заранее.
- prev - предыдущий элемент в серии.
- search - ссылка на поисковую форму.
- tag - тег или ключевое слово, описывающее документ.
Помните: этот атрибут работает исключительно в паре с href. - shape:
- Задает геометрическую форму активной области. Используется вместе с
coords: - default - охватывает всю область.
- rect - прямоугольник.
- circle - круг.
- poly - многоугольник любой сложности.
- target:
- Определяет, где откроется новая страница. Работает только с
href: - _blank - новое окно или вкладка (очень удобно для сохранения контекста).
- _parent - родительский фрейм.
- _self - текущая директория (по умолчанию).
- _top - во всю ширину окна браузера.
- имя_фрейма - конкретный iframe с указанным именем.
- type:
- Указывает MIME-тип целевого документа. Также требует наличия атрибута
href. Примечание: Ниточка, связывающая картинку и карту, - это атрибут usemap в теге изображения. Он должен точно совпадать с атрибутом name элемента <map>. Тег <area> так же поддерживает и Пример использования img src="image.png" width="104" height="96" alt="numbers" usemap="#num1" map name="num1" area shape="rect" coords="3,2,55,47" href="#" alt="kubik1" /map pСсылка расположена на кубике 1, наведите курсор, чтобы убедиться/p
|