Проблема с созданием навигационной карты

[htmlученик]

Здравствуйте. Я совсем-совсем новичок в верстке. Сейчас изучаю сайт webremeslo.ru, учебник по html и понемногу экспериментирую с кодом. Пытаюсь разобраться в теме навигационные карты и оформить меню сайта таким способом. Первая кнопка получилась, а две другие никак не получается сделать кликабельными. Если не трудно, посмотрите кусок кода, в чем моя ошибка?

<center>
<img src="menu.jpg" usemap="#menu">
</center>
<map name="menu">
<area shape="rect" coords="2,2,118,118" href="primer.html" alt="Главная" title="Главная">
<area shape="rect" coords="122,122,204,204" href="primer2.html" alt="Автор" title="Автор">
<area shape="rect" coords="210,210,306,306" href="primer.html" alt="Контакты" title="Контакты">
</map>

 

Edited November 29, 2016 by klierik
форматирование кода

[radioactive]

если у вас меню не по диагонали то проблема в координатах

так выглядят http://prnt.sc/ddd28k указанные области

демо https://jsfiddle.net/qgydfqdx/

[htmlученик]

Спасибо, все получилось. Дело было в координатах. На webremeslo посоветовали определять координаты в Paint...но это был не очень полезный совет, фотошоп удобнее оказался.