Всем привет. С Вами Бернацкий Андрей.
В этом уроке я расскажу о том, как создавать карты-изображений в HTML.
Карта-изображения – это какая-либо картинка, может быть фотография, которая имеет несколько активных зон.
Например, при нажатии мыши на активную зону переходим на определенный URL. Если сидите в vkontakte.ru, там пример карты-изображения – это когда отмечают на фотографии, и при наведении курсора мыши на человека, отмеченного на фотографии, показывается его имя и фамилия, а при щелчке мыши происходит переход на страницу этого человека.
Сначала предлагаю Вам видео версию данного урока:
Делается это все достаточно просто. Берем любую фотографию с друзьями. Лучше вставить ее в свой отдельный блок <div>.
|
1 2 3 |
<div id="map-img"> <img src="SDC10369.JPG" width="600" border="0" usemap="#img-nav" /> </div> |
Я взял для примера свою фотографию.
Для div задан id для того, что бы можно было назначить какие-нибудь отступы или еще, что нужно будет. Я в своем примере ничего задавать не буду.
Главный параметр у тега img в данном случае – это usemap="#img-nav". Он указывает на карту с каким именем мы будем ссылаться.
Далее создаем саму карту изображения. Карту создает тег <map>. Итак сейчас опишем активную зону, по нажатию на которую перейдем на сайт webformyself.com.
|
1 2 3 |
<map name="img-nav"> <area shape="rect" coords="240,150,420,440" href="//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" уже знакомые параметры. Останавливаться на них не буду.
Полный код представлен ниже:
|
1 2 3 4 5 |
<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="//www.webformyself.com" title="Andrey" alt="Andrey"> </map> |
Теперь при щелчке мыши на изображении по мне, будет осуществлен переход на www.webformyself.com.
Если нужно несколько активных зон, то просто добавляем новые теги
и описываем их так, как будет нужно.На этом, выпуск посвящённый созданию карт-изображений в HTML, завершим.
Автор: Андрей Бернацкий.
До встречи в следующих уроках.
Напоминаю Вам о том, что Вы можете скачать видео версии данного урока себе на компьютер по ссылке:
Комментарии (10)