Полигон (многоугольник).
Займёмся "жёлтой кнопкой", она у нас представлена в виде треугольника. Для того чтобы выделить её "рабочую" область из нашего рисунка, присвоим атрибуту 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>
Смотреть пример
Окружность
Ну и последняя "красная кнопка" она у нас круглая.. значит форма области будет круглой shape= "circle". На сей раз с координатами дело обстоит немного иначе. Нам понадобится три значения Х,У,R. Х и У это координаты центра нашей окружности, а R - это длина радиуса в пикселях.
Вот рисунок:
А вот пример:
<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">
<area href="primerk3.html" shape="circle"coords="250,50,33">
</map>
</body>
</html>
Смотреть пример
Доводим до ума..
Теперь немного о том, что ещё желательно было бы сделать с нашей картой прежде чем "монтировать" её в какую либо страницу.
Определим фиксированные размеры рисунка-карты атрибутами width и height
Напишем альтернативный текст, как для всего рисунка карты, так и для её отдельных областей используя атрибут alt, а также описание элементов атрибутом title.
Избавимся от рамки бордюра.. сделаем border="0"..(ну если Вам с бордюром больше нравится, можете этого не делать.. я не настаиваю..)
В конце должно выглядеть примерно вот так:
<html>
<head>
<title>Навигационная карта</title>
</head>
<body>
<center>
<img src="karta.jpg" usemap="#panel" width="300" height="100" border="0" alt="Панель управления" title="Панель управления">
</center>
<map name="panel">
<area href="primer1.html" shape="rect" coords="15,15,82,82" alt="Зелёная кнопка" title="Зелёная кнопка">
<area href="primer2.html" shape="poly" coords="148,15,185,82,110,82" alt="Жёлтая кнопка" title="Жёлтая кнопка">
<area href="primer3.html" shape="circle"coords="250,50,33" alt="Красная кнопка" title="Красная кнопка">
</map>
</body>
</html>
Смотреть пример
Дата добавления: 2015-11-06; просмотров: 738;