КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Пересечение областей
|
|
|
|
Доводим до ума..
Теперь немного о том, что ещё желательно было бы сделать с нашей картой прежде чем "монтировать" её в какую либо страницу.
Определим фиксированные размеры рисунка-карты атрибутами 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>
Иногда удобно формировать "рабочую" область изображения "смешивая" разные формы..
Предположим, наша очередная кнопка имеет такой вид:
Конечно, можно определить форму как многоугольник, но придется задать уйму координат для округлой части такой кнопки (ну это если нужна особая точность в навигационной карте).
А можно определить в этом примере две формы прямоугольник 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>
|
|
|
|
|
Дата добавления: 2014-10-31; Просмотров: 341; Нарушение авторских прав?; Мы поможем в написании вашей работы!