Прямоугольная область

Теперь наша карта приобретает такой вид:

По сути теперь "зелёная" квадратная кнопка стала рабочей.

В чем Вы можете убедится нажав на неё в этом примере:

<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">
</map>
</body>
</html>

Немного поспешил с примером толком не объяснив суть написанного.. Заострим внимание на атрибутах тега <area>.

href="primer1.html" - здесь думаю понятно, это путь к документу, который должен открыться при нажатии на "зелёную кнопку".

Так как кнопка у нас квадратная, а квадрат как известно это "правильный" прямоугольник, форму области рисунка назначаем прямоугольной shape="rect".

А теперь самое интересное coords="15,15,82,82" - координаты.. Для прямоугольника они задаются двумя точками по принципу "Х1,У1,Х2,У2" Где Х1,У1- первая точка и соответственно Х2,У2 -вторая. Координаты указываются в пикселях.. Наш рисунок/карта имеет размеры 300 на 100 пикселей, её самый верхний левый пиксель имеет координаты Х=0,У=0, а самый нижний правый Х=300,У=100. Если не понятно, окунёмся в геометрию за пятый класс..

Взгляните на рисунок:

Так, выбрав прямоугольную форму shape="rect" для нашей области в виде квадратной кнопки мы указали координаты ёё верхнего левого и нижнего правого пикселей.. которых вполне достаточно для обозначения "рабочей" области всей кнопки.

<22 23 242526 27 28 >

Дата добавления: 2015-04-19; просмотров: 621;