Всем доброго времени суток! Одному из подписчиков обещал рассказать про карты-изображения. Сегодня покажу на конкретном примере.
Для создания карты-изображения вам необходимо изображение (гений :D).
Его мы будем разбивать на составные части с помощью тега <map>. Сначала указываем элемент <img> с адресом картинки. Далее ставим тег <map>. В который помещаем несколько тегов <area>. В <map> обязательно нужно указать атрибут name. Его значение нужно поместить в атрибут usemap вашего изображения.
И сразу к делу:
<img src = "вашакартинка.png" usemap = "#map">
<map name = "map">
<area shape = "rect" href = "ссылочка" coords = "20 20 120 120"/>
<area shape = "circle" href = "ссылочка" coords = "180 70 40"/>
</map>
И все! Элементы <area> разбивают часть картинки на области. За форму области отвечает атрибут shape. Можно сделать область прямоугольной или круглой. А можно и любой формы с помощью значения poly. Координаты областей довольно условные. Вы можете играть с ними в зависимости от размеров изображения. При клике на области вызываются разные переходы по ссылкам.
