Главная » (X)HTML » Карта-изображения #MAP, HTML. Или как нанести на изображение ссылки, метки и др.
Апр
14

Карта-изображения #MAP, HTML. Или как нанести на изображение ссылки, метки и др.

Сегодня я покажу вам как сделать кликабельным несколько участков на целостном изображении. Чтобы долго не танють прелюдию, переходим к примеру:
У нас есть изображение:

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

Теперь предоставлю вам код с помощью которого реализована данная карта:
[html]
<img src="http://kpeople.ru/wp-content/uploads/2012/04/Untitled-11112_black_08.png" width="880" height="107" alt="" usemap="#map">





<map name="map">
<area share="rect" coords="0,0,160,107" href="http://kpeople.ru/wp-admin/" title="Кабинет">
<area share="rect" coords="160,0,330,107" href="http://kpeople.ru/ask" title="Для дома">
<area share="rect" coords="330,0,530,107" href="http://kpeople.ru/category/kak-i-pochemu" title="Подключится">
<area share="rect" coords="530,0,700,107" href="http://kpeople.ru/contact" title="Поддержка">
<area share="rect" coords="700,0,880,107" href="http://kpeople.ru/ya" title="Компания">
<area share="default" nohref>
</map>
[/html]

Координаты я указывал в виде прямоугольников, для этого мне понадобилось знать всего 2 точки и их координаты в пикселях. Чтобы узнать точные координаты каждой точки я пользовался стандартной программой Paint. Покажу как именно ею пользовался:
Карта-изображения #MAP, HTML. Или как нанести на изображение ссылки, метки и др.
кликните для увелечения

Для удобства увеличьте изображение чтобы пиксели показывались максимально точно. Потом включите «Линейки», «Линии сетки» и «Строку состояния» — все это для удобства. При перемещении курсора мыши по изображению в самом низу. в строке состояния координаты вашего курсора будут меняться. Вам всего лишь нужно будет переписать их в свою карту к изображению на сайте.

share=rect coords=0,0,160,107 href=http://kpeople.ru/ask — указание прямоугольника как нужную область, и указание координат по горизонтали и вертикали сначала первой точки, потом второй. Ну а в самом конце ссылка на нужную нам статью, страницу.

Надеюсь все понятно! Если нет — задаем вопросы, если да — пишем спасибо ;) А с вами опять был я, до скорых встреч и не забывайте подписываться на новые материалы в форме предоставленной под данным материалом.



Понравилась статья? Сделай приятно ее автору, поделись с друзьями:


Хотите получать обновления данного блога на EMail?

Введите адрес Почтового Ящика:




Подтвердите подписку в письме пришедшем на Почту, после чего начнете получить рассылку.