Пересечение областей
Иногда удобно формировать "рабочую" область изображения "смешивая" разные формы..
Предположим, наша очередная кнопка имеет такой вид:
Конечно, можно определить форму как многоугольник, но придется задать уйму координат для округлой части такой кнопки (ну это если нужна особая точность в навигационной карте).
А можно определить в этом примере две формы прямоугольник 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>
Дата добавления: 2015-04-19; просмотров: 734;