Навигационные карты

Итак, вы уже знаете, что ссылки на веб-страницах могут быть в виде текста или изображения. Однако с помощью HTML возможно задавать активные области на изображении и таким образом получать несколько разных гиперссылок. Другими словами, чтобы при нажатии на разные области одной и той же картинки, вы попадали на разные страницы или другие документы.

Можно конечно разрезать картинку на части и добиться того же результата, тем не менее, навигационные карты сегодня являются не редкостью. Всё это легко реализовать при помощи навигационной карты.

Навигационные карты задаются тэгом <map></map>. Тэг <map> включает себя тэг <area>, которые определяют геометрические области внутри карты. <map><area ...><area ...><area ...></map>

Для начала рисуем картинку (305х154 пикселей), в любом графическом редакторе Представляем, что прямоугольники №1 и №2, нарисованные на ней, - это изображения каких-либо кнопок которые требуются вам для перехода, допустим по страницам вашего сайта, такая вот картинка и есть навигационная карта где области №1 и №2 будут ссылками.

И так тег <area> определяет геометрические области и куда попадет посетитель вашей страницы при нажатии на ту или иную область.
У тега <area> есть атрибут shape который определяет форму области:

  • shape="rect" - прямоугольник
  • shape="circle" - круг
  • shape="poly" - многоугольник

Атрибут coords - определяет координаты (положение вашей геометрической формы). Число координат и порядок их значений зависят от выбранной вами формы. Отсчет ведется от левого верхнего угла картинки, возьмем его за начало координат (0;0). Для работы с прямоугольной областью понадобятся координаты верхнего - левого и нижнего - правого углов области. Порядок записи координат для атрибута coords следующий:

<area shape="rect" coords="x1,y1,x2,y2">

В моем примере у прямоугольника №1 координаты такие:
x1=23, y1=26, x2=135, y2=128
У прямоугольника №2 такие:
x1=170, y1=26, x2=283, y2=128

Значит запись для данной картинки будет выглядеть таким образом:
<map>
<area shape="rect" coords="23,26,135,128">
<area shape="rect" coords="170,26, 283,128">
</map>

Теперь следует прописать путь, куда будут ссылаться области данной картинки, для этого понадобится уже знакомый вам атрибут href:

<area href="photo.html" shape="rect" coords="23,26,135,128">
<area href="big.jpg" shape="rect" coords="170,26, 283,128">

Для того чтобы часть картинки стала ссылкой, нужно указать имя карты и связать ее с картинкой. У тэга <map> есть атрибут name - имя карты, например "karta".

<map name="karta">
<area href="photo.html" shape="rect" coords="23,26,135,128">
<area href="big.jpg" shape="rect" coords="170,26, 283,128">
</map>

Для того, чтобы связать карту с картинкой, надо использовать атрибут usemap="#имя_карты" для картинки получится запись такого плана:

<img src="karta.jpg" usemap="#karta">
<map name="karta">
<area href="photo.html" shape="rect" coords="23,26,135,128">
<area href="big.jpg" shape="rect" coords="170,26, 283,128">
</map>

Вставляю данную запись в наш пример.

  <html>
<head>
<title>Моя первая страничка</title>
</head>
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
<a href="big.jpg" target="_blank"><img src="smal.jpg" width="240" height="180" hspace="30" vspace="5" alt="Посмотреть большую картинку"></a>
<div align="center">
<h2>Это моя первая страница.</h2>
<br>
<font color="#009933">У меня все получится.</font></div>
<hr color="#FF0033">
<p align="Center">
<img src="karta.jpg" usemap="#karta" border="0">
<map name="karta">
<area href="photo.html" shape="rect" coords="23,26,135,128" target="_blank" title="страница с картинками">
<area href="big.jpg" shape="rect" coords="170,26, 283,128" target="_blank" title="посмотреть пейзаж">
</map>
</p>
<div align="Justify">
<font color="#CCCCFF">
<a href="photo.html"> <img src="photo.jpg" align="left" hspace="30" vspace="5" width="320" height="256" alt="Перейти на стр.с картинками"> </a>
<font size="+1" face="Cosmic Sans, arial, verdana, courier"> Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. </font>
<br clear="left">
<b> Он словно сошел с картинки </b>
парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с белыми гамашами и серебряными кнопками, в руке - изящная тросточка с серебряным же набалдашником.
<i> Однако внимание привлекал не столько щегольской наряд пассажира, </i>
сколько импозантная, можно даже сказать, эффектная внешность.
<u> Молодой человек был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, </u>
ему необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные волосы имели странную особенность - интригующе серебрились на висках.
<p align="right">Борис АКУНИН</p>
</font>
</div>
</body>
</html>    посмотреть

Кроме прямоугольных областей, можно задавать координаты круглых и многоугольных областей одной картинки. Для начала разберем круглую область: В отличие от прямоугольной области, для круглой области задаются координаты ее центра (х,у) и длина радиуса (R) в пикселях.
Тип области для круга прописывается так:
<area shape="circle">
В ниже приведенном примере координаты круга №1 - х=77, у=78 и R=58,
круга №2 - х=227, у=78, R=58
Получается вот такая запись:
<map>
<area shape="circle" coords="77,78,58">
<area shape="circle" coords="227,78,58">
</map>
Теперь, прописываем имя карты, куда она ссылается и привязываем карту к рисунку:

<img src="karta3.jpg" usemap="#karta3" border="0">
<map name="karta3">
<area href="photo.html" shape="circle" coords="77,78,58" target="_blank" title="страница с картинками">
<area href="big.jpg" shape="circle" coords="227,78,58" target="_blank" title="посмотреть пейзаж">

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

С многоугольными областями дело обстоит немного сложнее, но не намного. На самом деле тут нет ничего страшного.
И так задаем тип области poly, запись получится вот такая:
<area shape="poly">
Координаты пишутся следующим образом:
<area shape="poly" coords="x1,y1,x2,y2,х3,у3,...,x8,y8">
Запись для примера ниже будет выглядеть следующим образом:
<area shape="poly"
coords="x300,y15,x317,y65,x380,y80,
x317,y95,x300,y145,x288,y100,x222,y80,x288,y65">
Дальше точно также как в примерах с прямоугольниками и кругами прописываем ссылку, имя карты, и привязываем карту к рисунку:

<img src="karta4.jpg" usemap="#karta4" border="0">
<map name="karta4">
<area href="photo.html" shape="poly"
coords="x151,y10,x163,y58,x212,y69,
x163,y79,x152,y129,x139,y78,x90,y69,x139,y57"
target="_blank" title="страница с картинками">

Результат смотрим на примере со звездочкой.


Вернуться назад Перейти к следующей странице
2009 - 2012г. andron09_73@mail.ru
  Дизайн наружной рекламы и наружная реклама изготовление Москва   лучший выбор электронные книги киев