Займёмся "жёлтой кнопкой", она у нас представлена в виде треугольника. Для того чтобы выделить её "рабочую" область из нашего рисунка, присвоим атрибуту shape значение poly - полигон, которое определит эту область как некий многоугольник, где координаты через запятую будут являться его вершинами, их может быть сколь угодно много "Х1,У1,Х2,У2,Х3,У3,Х4,У4… Х124,У124" фигура образованная этими точками вершинами углов может иметь вид любого многоугольника как правильного, так и неправильного. В нашем случае угла всего три, на то он и треугольник, следовательно его координаты будут заданы тремя парами значений "Х1,У1,Х2,У2,Х3,У3"
Значит всё вместе пишем так:
<area href="primer2.html" shape="poly" coords="148,15,185,82,110,82">
А вот рисунок который наглядно показывает откуда берутся координаты точек..
Пример:
<html>
<head>
<title>Навигационная карта</title>
</head>
<body>
<center>
<img src="karta.jpg" usemap="#panel">
</center>
<map name="panel">
<area href="primer1.html" shape="rect" coords="15,15,82,82">
<area href="primer2.html" shape="poly" coords="148,15,185,82,110,82">
</map>
</body>
</html>
