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

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

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



Шесть координат задают три точки - углы треугольника. В этом случае их последовательность не важна, и вы могли бы написать, например, 400; 150; 0; 150; 200; 0, однако когда количество углов является боль-шой, важен порядок соединения точек. Например, записи

CAREA SHAPE = "poly" COORDS = "0,0,200,0,200,150,100,75,0,150"> <AREA SHAPE = "poly" COORDS = "0,0,200,0,100,75,200, 150,0,150" & # 62;

дадут разные результаты. В первом случае это прямоугольник с вырезанным треугольником снизу, а во втором - с вырезанным три-угольником справа.

Определение горячих областей является очень хлопотным работой, поскольку приходится задавать координаты каждой узловой точки. На реаль-ном рисунке это невозможно сделать точно, поэтому с помощью графических редакторов находят все координаты, а затем переносят их в HTML-документ.

Поясним использование карты гиперссылок на примере.

Создадим сайт «Моя фирма». Его главная страница выполнена в виде графического изображения, определенные части которого являются горячими областями. Выбрав их, посетитель может увидеть информацию о направлениях работы фирмы: «Заказчики», «Продукция», «Будущее».

В папку веб-сайта следует поместить следующие файлы:

♦ графический файл map.jpg;

♦ HTML-документы 1.html, 2.html, 3.html, содержащих описания на-направлений работы фирмы;

♦ HTML-документ map.html, в котором для горячих областей ма-люнка map.jpg определены гиперссылки на документы 1.html,

2. html, 3.html.


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

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

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