Общий тег навигационной карты

<map>
...
</map>

Далее нужно знать что области выделения бывают трёх видов:
1. Прямоугольник
2. Круг
3. Многоугольник

Рассматривать будеи самый простой-это прямоугольник (определение "rect")

Чтобы показать что мы хотим присвоить ссылку именно прямоугольнику пишем так

<map>
<area shape="rect">
</map>

Далее нужно присвоить координаты.Смотрим на рисунок:

http://s61.radikal.ru/i173/0909/72/763359bc51a0t.jpg

Что бы узнать координаты загружаем рисунок в Adobe ImageReady
Подвожу мышку к первым координатам x1y2(отмечено красным квадратиком). В правом верхнем углу увидим координаты точки x1y1:

http://s41.radikal.ru/i093/0909/18/06526f1662f2t.jpg

Подвожу ко вторым x2y2. В правом верхнем углу видим координаты точки x2y2:

http://i032.radikal.ru/0909/a4/94e6787de1bdt.jpg

Запись координат имеет такой вид:

<map>
<area shape="rect" coords="x1,y1,x2,y2">
</map>

Мой прямоугольник имеет такие координаты:
x1=122
y1=109
x2=449
y2=283

Записываю в код:

<map>
<area shape="rect" coords="122,109,449,283">
</map>

Теперь нужно присвоить ссылку этой области,делаем так:

<map>
<area shape="rect" coords="122,109,449,283" href="ссылка">
</map>

Почти всё готово,осталось только связать наш код с картой и дать название:

Даём название карте:

<map name="Map">
<area shape="rect" coords="122,109,449,283" href="ссылка">
</map>

Что бы связать изображение с картой делаем так:

<img src="http://s61.radikal.ru/i173/0909/72/763359bc51a0.jpg" usemap="#Map">
<map name="Map">
<area shape="rect" coords="122,109,449,283" href="http://forumdesign.0pk.ru/">
</map>

источник