Формирование карты гиперссылок

Author
Анна Петрова
Senior UX Designer @ TechCorp

HTML и CSS
3.9 / 5 (47 оценок)


Графическую карту ссылок создают с помощью нескольких тегов. В теге <IMG> определяют атрибут SRC, чтобы задать изображение, и ат-рибут USEMAP, значением которого является имя карты (должно начинаться символом #). Собственно карту создают с помощью тега <МАР> с атрибутом NAME, содержащий имя карты (определенное в атрибуте USEMAP, но без символа #) и тега </ МАР>. Между ними записывают теги <AREA>, задающих параметры горячих областей. При этом используют такие атрибуты:

♦ HREF - определяет гиперссылки, связанное с областью;

♦ SHAPE - определяет форму области, его значениями могут быть:

♦ rect - прямоугольник;

♦ polygone или poly - многоугольник;

♦ circle - круг;

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

Пример определения карты ссылок приведены ниже.

<IMG SRC="map.bmp" USEMAP="#karta">

<MAP NAME="karta">

<AREA HREF="1.html" SHAPE="rect" COORDS="70,250,160,270">

<AREA HREF="2.html" SHAPE="circle" COORDS="260,140,60">

</ MAP>

Следует поработать над рисунком карты в графическом редакторе, чтобы очертить необходимые области, которые позже станут гиперпосы - ланью, и определить координаты, будут записанные как значения атрибута COORDS.


Страница: 1 из 4    -   Следующая

Навигация: 1  2  3  4  
#UX #UI #Дизайн #Доступность
Author

Анна Петрова

Senior UX Designer @ TechCorp

Более 10 лет опыта в дизайне пользовательских интерфейсов. Работала с компаниями из списка Fortune 500. Спикер на международных конференциях по дизайну.

Комментарии (5)

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

Ваш email не будет опубликован

М
Михаил Сидоров

15 Января 2026

Отличная статья! Особенно понравился раздел про визуальную иерархию. Обязательно применю эти принципы в своём следующем проекте.

Е
Елена Козлова

20 Декабря 2025

Спасибо за подробное объяснение принципов доступности. Многие дизайнеры недооценивают эту тему, а зря!

А
Алексей Новиков

17 Ноября 2025

Could you share more about design systems? Would love to see a dedicated article on that topic!

Понравилась статья?

Подпишитесь на нашу рассылку и получайте новые материалы каждую неделю