Карта-изображения в HTML

map"

Всем привет. С Вами Бернацкий Андрей.

В этом уроке я расскажу о том, как создавать карты-изображений в HTML.

Карта-изображения – это какая-либо картинка, может быть фотография, которая имеет несколько активных зон.

Например, при нажатии мыши на активную зону переходим на определенный URL. Если сидите в vkontakte.ru, там пример карты-изображения – это когда отмечают на фотографии, и при наведении курсора мыши на человека, отмеченного на фотографии, показывается его имя и фамилия, а при щелчке мыши происходит переход на страницу этого человека.

Сначала предлагаю Вам видео версию данного урока:

Видео версия урока

Делается это все достаточно просто. Берем любую фотографию с друзьями. Лучше вставить ее в свой отдельный блок <div>.

<div id="map-img">
<img src="SDC10369.JPG" width="600" border="0" usemap="#img-nav" />
</div>

Я взял для примера свою фотографию.

map

Для div задан id для того, что бы можно было назначить какие-нибудь отступы или еще, что нужно будет. Я в своем примере ничего задавать не буду.

Главный параметр у тега img в данном случае – это usemap="#img-nav". Он указывает на карту с каким именем мы будем ссылаться.

Далее создаем саму карту изображения. Карту создает тег <map>. Итак сейчас опишем активную зону, по нажатию на которую перейдем на сайт webformyself.com.

<map name="img-nav">
<area shape="rect" coords="240,150,420,440" href="http://www.webformyself.com" title="Andrey" alt="Andrey">
</map>

Идем по порядку.

<map name="img-nav"> — значение параметра name должно совпадать со значением параметра usemap тега img, только у тега map оно записывается без символа #.

Далее тег <area> — говорит, что сейчас выделим активную зону.

Параметр shape тега <area> — показывает, какого типа будет наша область. На то, какая будет наша область, показывает значение параметра shape:

rect – указывает, что область будет в виде прямоугольника.

poly – произвольный многоугольник.

circle – область будет в виде круга.

Параметр coords содержит координаты нашей области.

Если shape="rect", то указываются координаты левого верхнего угла и правого нижнего. То есть первая пара чисел указывает на левый верхний, а вторая пара чисел – на правый нижний угол.

Если shape="poly", то указываются координаты каждой вершины многоугольника. shape="poly" coords="80,100,150,100,210,40,300,40,300,110" в данном случае координаты первой вершины будут 80,100, второй 150,100, третий — 210,40, четвертой — 300,40, пятой — 300,110.

Если shape="circle" , то указываем координаты центра и радиус. shape="circle" coords="300,300,100" здесь координаты центра 300,300 и радиус 100.

Далее параметр shref содержит адрес страницы, или E-mail адрес. То есть, то же что и у обычной ссылки.

title="Andrey" alt="Andrey" уже знакомые параметры. Останавливаться на них не буду.

Полный код представлен ниже:

<div id="map-img">
<img src="SDC10369.JPG" width="600" border="0" usemap="#img-nav" />
<map name="img-nav">
<area shape="rect" coords="240,150,420,440" href="http://www.webformyself.com" title="Andrey" alt="Andrey">
</map>

Теперь при щелчке мыши на изображении по мне, будет осуществлен переход на www.webformyself.com.

Если нужно несколько активных зон, то просто добавляем новые теги
и описываем их так, как будет нужно.

На этом, выпуск посвящённый созданию карт-изображений в HTML, завершим.

Автор: Андрей Бернацкий.

До встречи в следующих уроках.

Напоминаю Вам о том, что Вы можете скачать видео версии данного урока себе на компьютер по ссылке:

Видео версия урока

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (7)

  1. Aleks

    Спасибо Андрей за уроки. ВЫ молодец, так держать

  2. zaizberg

    Контент интересный,почерпнул много новго.
    всем рекомендую для прочтения.

  3. Кирилл

    Не закрыт тег div в примере кода! :) а в остальном круто! спасибо за урок!!

  4. Tanuxa

    Карта-изображения очень интересная вещь, безусловно пригодиться (когда-нибудь, только когда? :) Это я про себя), спасибо!!!
    Так же спасибо и за видео урок, посмотрела!

  5. Mike

    Спасибо! Отличный урок! Просто, понятно!
    Тег div не закрыт только в примере на сайте (видимо не уместилось), в видео уроке он закрывается на положено.

  6. newJS

    Проще использовать спец программу, спец время сэкономит, а начинающий сделать сможет.
    _http://newjs.my1.ru/load/generator_kart_html/1-1-0-4

  7. МАРИНА

    Сначала предлашаю Вам видео версию данного урока: Ошибочку устраните

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree