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

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

☛HTML и CSS ✎
★★★★★
4.8 / 5 (96 оценок)



Местоположение любой точки на рисунке определяют два числа - ее горизонтальная и вертикальная координаты. Верхняя левая точка имеет координаты (0; 0). Большим горизонтальным координатам соответствуют правее точки, большим вертикальным - ниже. Например, если рисунок имеет размер 400x300 пикселей, и необходимо определить прямоугольную область, которая занимает его верхнюю левую часть и имеет вдвое меньшую ширину и высоту, запись тега <AREA> будет таким:

<AREA SHAPE="rect" COORDS=nO,0,200,150">

В этом записи атрибут COORDS определяет прямоугольник за помощи двух точек: слева верхнего угла с координатами (0; 0) и правого нижнего с координатами (200; 150) (центральная точка рисунка, имеет размер 400x300).

Если горячая область является кругом, то следует отметить координаты только одной точки - центра окружности, а также задать его радиус, например:

<AREA SHAPE="circle" COC)RDS="200,150,40">

Такая запись определяет круглую горячую область, расположенную в центре рисунка размером 400x300. Координаты центральной точки (200; 150), радиус окружности - 40 пикселей.

Самый сложный случай - многоугольная горячая область, для которой нужно последовательно указывать координаты всех углов. Предположим, что на рисунке размером 400x300 пикселей необходимо определить горячую область в форме равнобедренного треугольника, основание которого проходит точно посередине рисунка, занимая всю его ширину, а вершина находится посередине верхней границы. Эту область определяют так:

<AREA SHAPE="poly" COORDS="0,150,400,150,200,0">


Предыдущая   -    Страница: 2 из 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!

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

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