New Page 1
Уроки HTML. Карты. Как
сделать ссылкой отдельный кусок картинки.
В HTML предположим, у
вас есть картинка, содержащая красивые надписи для меню. И вы хотите засунуть ее
на сайт и сделать ссылки на эти надписи из картинки. можно пойти по пути
разрезания картинки,
как это описано в приемах сайтостроения у меня на сайте. Но есть способ
лучше. можно воспользоваться тэгм <map> и
привязать
интересующие нас ссылки к разным областям картинок. Для того, что бы лучше
понять синтаксис этого тэга, рассмотрим пример:
файл les1.htm:
<html>
<head>
<title>Уроки HTML.
Карты. Как сделать ссылкой отдельный кусок картинки.
Файл les1.htm</title>
</head>
<body>
<br>
<p><img border="0" src="100000-1.JPG" width="587" height="252" usemap="#myMap"></p>
<map name="myMap">
<area href="les1_1.htm" shape="rect" coords="0,0,100,252">
<area href="les1_2.htm" shape="rect" coords="100,0,440,252">
<area href="les1_3.htm" shape="rect" coords="440,0,587,252">
</map>
</body>
</html> |
файл les1_1.htm
<html>
<head>
<title>Уроки HTML.
Карты. Как сделать ссылкой отдельный кусок картинки.
Файл les1_1.htm</title>
</head>
<body>
<p><span lang="ru"><font size="7" color="#FF0000"><b>Вы щелкнули по левому
краю
банкноты.</b></font></span></p>
<p> </p>
</body>
</html> |
файл les1_2.htm
<html>
<head>
<title>Уроки HTML.
Карты. Как сделать ссылкой отдельный кусок картинки.
Файл les1_2.htm</title>
</head>
<body>
<p><span lang="ru"><font size="7" color="#0000FF"><b>Вы щелкнули по середине
банкноты.</b></font></span></p>
</body>
</html> |
файл les1_3.htm
<html>
<head>
<title>Уроки HTML.
Карты. Как сделать ссылкой отдельный кусок картинки.
Файл les1_3.htm</title>
</head>
<body>
<p><span lang="ru"><font size="7" color="#009933"><b>Вы щелкнули по правому
краю
банкноты.</b></font></span></p>
</body>
</html> |
Весь пример вместе с картинкой вы можете так же скачать
отсюда.
Когда вы откроете в браузере файл les1.htm, то
увидите вот такую картинку:
В зависимости от того, на какое место картинки щелкните, вылезет та или иная
надпись, например, если с левого краю, то увидите вот что:
координаты левого края и ссылку на него мы задали тэгом
<area>:
<area href="les1_1.htm"
shape="rect" coords="0,0,100,252"> |
таким ж тэгом задали координаты середины и правого края:
<area href="les1_2.htm"
shape="rect" coords="100,0,440,252">
<area href="les1_3.htm" shape="rect" coords="440,0,587,252"> |
Таким, образом, если щелкните по середине картинки, то увидите уже вот такой
текст:
а если с правого краю то браузер уже отобразит вот это:
Еще обратите внимание на тэг <img>, в нем надо не
забыть создать привязку к карте (выделено красным):
<img border="0" src="100000-1.JPG" width="587"
height="252" usemap="#myMap"> |
так же в самом тэге карты мы задаем имя (выделено красным):
<map name="myMap">
<area href="les1_1.htm" shape="rect" coords="0,0,100,252">
<area href="les1_2.htm" shape="rect" coords="100,0,440,252">
<area href="les1_3.htm" shape="rect" coords="440,0,587,252">
</map> |
|