В данной статье речь пойдет о создании карт изображений. Для чего они нужны? Например, у вас имеется изображение, с помощью определенных манипуляций вы можете сделать ее ссылкой. Ссылкой можно сделать не только изображение целиком, а и любое количество объектов на изображении.
Давайте начнем с самого простого, сделаем одно изображение одной ссылкой. Для этого необходимо перейти в исходный код вашего сайта и найти строчку с нужным изображением. Нашли? Теперь выделяем строчку с изображением и нажимаем на кнопку с изображением звена цепи, она расположена вверху окна. В появившемся окне вводим URL на который перебросит ссылка. Сохраняем и проверяем.

HTML Создание карты изображений

Теперь давайте создадим более сложную карту изображений. В тег IMG добавляем параметр (USEMAP)указывающий место нахождения карты описываемого изображения:

Далее прописываем такой специальный тег, который называется MAP:
Прописываем атрибут name



Чтобы тег map связать с изображением в коде рисунка пишем, тег USEMAP и через знак # прописывает тоже название, что и в атрибуте name, как показано выше.
В теге map прописываем, тег area (описывает участок изображения и ставит ему в соответствие URL), в нем же пишем атрибут href(адрес ссылки который отобразится при щелчке на изображение) далее пишем атрибут shape (этим атрибутом мы говорим браузеру, какой фигурой будет наша ссылочная область). И последний в этом теге атрибут cords (указывает координаты ссылочной области x; y;)
Чтобы сделать ссылкой другую область изображения копируем, тег area и под все вышеописанные атрибуты, находящиеся в нем подставляем другие необходимые нам данные.

Преимущества HTML Создание карты изображений

Если вы решили создать хороший веб сайт, тогда вам необходимо понимать и знать недостатки и преимущества карт-изображений (КИ)

Имеет смысл применять HTML Создание карты изображений в таких ситуациях:

Чтобы отображать пространственные связи, например географические координаты, радиосхемы. Пример, вы обладаете некой информацией по различным предприятиям Украины, очень наглядно будет сделать представление о каждом предприятии в виде карты Украины и при нажатие, на какое либо из них будет происходить переход к желаемой информации.

Когда необходимо отобразить меню самого высшего уровня на всех имеющихся страницах сайта. Это предоставит пользователю возможность для осуществления перехода в нужный ему раздел с любой страницы сайта. Таким образом данное меню позволяет сократить затраты времени на разработку страниц, ведь чтобы описать ссылки нужен будет одинаковый файл.

Еще одно преимущество карт-изображений это экономия места на хостинге и облегчение навигации для пользователя.

Недостатки

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

плохо спроектированные КИ могут привести к путанице. Иногда довольно затруднительно определить области, которые являются активными на изображении.

Отсутствие возможности у браузера пройденные ссылки отмечать другим цветом.

Атрибуты тега area

Активные (части) области на рисунке определяются атрибутами тега

, каждая часть это — ссылка. Совокупность таких областей привязанных к картинке называют картой изображения. На первый взгляд этот рисунок похож на все остальные, но разница в том, что он разбит на области различной формы, и эти области по отдельности являются ссылкой.
Для задачи форм области, их размеров, установки адреса документов, имени окна, в которое браузером будет загружаться документ, применяется тег. Месторасположение его не изменно и находится оно в контейнере тега

.
Атрибуты:
accesskey – для переходя в область при помощи набора комбинации клавиш;

type – для установки MIME документа, куда ведет ссылка;

tabindex – для задачи последовательности перехода от элемента к другому элементу при помощи кнопки Tab;

hreflang – для указания языка документа, куда ведет ссылка;

alt –альтернатив-ый текст.

href- для указания адреса документа,по которому будет осуществлен переход .
target – для записи имени окна,возможно фрейма, куда браузеру необходимо загрузить документ;

coords- для координат активной области;

shape- для задачи формы области.