Пересечение областей

Иногда удобно формировать " рабочую" область изображения " смешивая" разные формы..

Предположим, наша очередная кнопка имеет такой вид:

Конечно, можно определить форму как многоугольник, но придется задать уйму координат для округлой части такой кнопки (ну это если нужна особая точность в навигационной карте).

А можно определить в этом примере две формы прямоугольник rect и окружность circle как показано на рисунке:

А в коде указать путь к одному и тому же документу:

Пример:

< html>
< head>
< title> Навигационная карта< /title>
< /head>
< body>
< center>
< img src=" karta1.jpg" usemap=" #panel1" width=" 300" height=" 100" border=" 0" alt=" Панель управления" >
< /center>
< map name=" panel1" >
< area href=" primer4.html" shape=" circle" coords=" 206, 50, 33" title=" Синяя кнопка" >
< area href=" primer4.html" shape=" rect" coords=" 80, 17, 206, 83" title=" Синяя кнопка" >
< /map>
< /body>
< /html>

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

" Не область"

Рассмотрим на примере.. предположим необходимо изготовить вот такую кнопку:

Как быть с отверстием в ней?

Тег < area> помимо атрибута href имеет противоположенный по значению атрибут nohref - неактивная область, то есть если пользователь нажмет на такую область, то ровным счетом ничего не произойдёт, чего нам собственно и необходимо добиться при изготовлении " отверстия" в нашей карте.

Карта будет задана двумя областями, неактивной окружностью circle и активной прямоугольной областью rect и как показано на рисунке чертеже иметь следующие координаты:

Как уже говорилось ранее, при пересечении областей наибольшим приоритетом будет пользоваться та область, которая в коде внутри тега < map> указана первой

Следовательно, пример будет иметь такой вид:

< html>
< head>
< title> Навигационная карта< /title>
< /head>
< body>
< center>
< img src=" karta2.jpg" usemap=" #panel2" width=" 150" height=" 150" border=" 0" alt=" Панель управления" >
< /center>
< map name=" panel2" >
< area nohref shape=" circle" coords=" 76, 74, 35" title=" дырка" >
< area href=" primer5.html" shape=" rect" coords=" 25, 22, 126, 124" title=" Дырявая кнопка" >
< /map>
< /body>
< /html>