Программирование - это просто
Advertisement
Главная arrow Web-программирование arrow Уроки HTML arrow Уроки HTML. Карты. Как сделать ссылкой отдельный кусок картинки.
29.05.2024 г.
Главное меню
Главная
Интернет магазин
Программные продукты
Биржевые роботы
Искусственный интеллект
Математика и информатика
1С:Предприятие
Уроки C#
Уроки Delphi
Уроки программирования
Web-программирование
Дизайн и графика
Компьютер для блондинок
Исходники
Статьи
Платный раздел
Рассказы про компьютеры
Хитрости и секреты
Системный подход
Размышления
Наука для чайников
Друзья сайта
Excel-это не сложно
Все о финансах
.
Уроки HTML. Карты. Как сделать ссылкой отдельный кусок картинки. Печать E-mail
Автор megabax   
13.05.2010 г.
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, то увидите вот такую картинку:

Уроки HTML. Карты. Как сделать ссылкой отдельный кусок картинки.

В зависимости от того, на какое место картинки щелкните, вылезет та или иная надпись, например, если с левого краю, то увидите вот что:

Уроки HTML. Карты. Как сделать ссылкой отдельный кусок картинки.

 

координаты левого края и ссылку на него мы задали тэгом <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">

Таким, образом, если щелкните по середине картинки, то увидите уже вот такой текст:

Уроки HTML. Карты. Как сделать ссылкой отдельный кусок картинки.

 а если с правого краю то браузер уже отобразит вот это:

Уроки HTML. Карты. Как сделать ссылкой отдельный кусок картинки.

Еще обратите внимание на тэг <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>
Последнее обновление ( 03.11.2014 г. )
 
« След.   Пред. »
 
© 2024 Программирование - это просто
Joomla! - свободное программное обеспечение, распространяемое по лицензии GNU/GPL.
Русская локализация © 2005-2008 Joom.Ru - Русский Дом Joomla!
Design by Mamboteam.com | Powered by Mambobanner.de
Я принимаю Яндекс.Деньги