Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Как в HTML сделать Изображения-Карту.

Viktor | 24.02.2014 | нет комментариев

Создаём карту ссылок из изображения (картинки).

Карты – это способ сделать различные части одного графического изображения, разными гиперссылками. Они позволяют выделить отдельные области изображений и определить для каждой из них свое действие. В данном случае мы будем рассматривать возможность создания ссылок из различных участков одного графического файла (картинки). Допустим у Вас имеется например такой графические файл (или примерно такой):

Создаём из картинки карту изображений

В данном случае картинка взята произвольно, просто для примера. Здесь Вы видите скриншоты разных сайтов, объединенных на одной общей картинке. Допустим Вам нужно сделать, чтобы при клике на каждый из сайтов, изображенных на этой картинке (уменьшенное изображение), человек попадал именно на этот сайт. Т.е. разбить всю картинку примерно так:

Разбиваем всю карту на отдельные участки

Делается это достаточно просто. Пускай наше изображение, точнее графический файл, называется karta2.jpg . Размер картинки используемой здесь 400х255 пикселей. Сначала давайте посмотрим Листинг 1 такой разбивки:

Листинг 1.

<img src=”karta2.jpg” border=”0″ width=”400″ height=”255″ ALT=”Пример изображения-карты” usemap=”#karta2″>
<map name=”karta2″>
<area shape=”rect” coords=”7,8,117,85″ title=”Прогнозы кота Сеньки на 2011 год” href=”http://sbikov.russ67.ru” target=”_blank”>
<area shape=”rect” coords=”142,6,253,86″ title=”Link 2″href=”URL”>
<area shape=”rect” coords=”280,8,389,86″ title=”Link 3″ href=”URL”>
<area shape=”rect” coords=”72,97,182,156″ title=”Link 4″ href=”URL”>
<area shape=”rect” coords=”213,97,322,157″ title=”Link 5″ href=”URL”>
<area shape=”rect” coords=”21,177,129,246″ title=”Link 6″ href=”URL”>
<area shape=”rect” coords=”142,175,253,246″ title=”Link 7″ href=”URL”>
<area shape=”rect” coords=”267,176,377,246″ title=”Учимся делать сайты и зарабатывать в Интернете” HREF=”http://www.luksweb.ru” target=”_blank”>
</map>

Как видите, чтобы создать карту, нужно вставить в тэг <img> атрибут usemap=”#name”, где name – имя карты (значок # обязателен) в данном случае имя графического файла карты: karta2.jpg . Я пропускаю остальные атрибуты в этом тэге, Вы их должны знать, т.к. о них уже рассказывалось в предыдущих уроках.

Далее описываем все активные области карты (в данном случае у нас их 8). Начинаем с открывающегося тэга <map name=”karta2″> (здесь повторяется имя картинки, но уже без значка #), а заканчиваем закрывающимся тэгом </map>.

Между тегами <map> </map> описывается каждая активная область (ссылка) изображения, тегами: <area shape=”форма” coords=”координаты” href=”URL адрес” title=”альтернативный текст”>.

Элемент <area> имеет следующие аттрибуты и их значения:

share Описывает форму выделяемой области, возможные значения:
rect – прямоугольник
circle – круг
poly – многоугольник
default – определяет всю область, т.е весь рисунок может стать ссылкой.
coords Координаты, определяющие размеры и положение области на изображении. Все координаты отсчитываются в пикселях от левого верхнего угла изображения. Количество и порядок значений зависит от значения аттрибута shape :
rect: – левый-X, верхний-Y, правый-X, нижний-Y (т.е. сначала координаты левого верхнего угла, затем правого нижнего)
circle: – центр-X, центр-Y, радиус (т.е. горизонтальная и вертикальная координаты центра круга и радиус)
poly: – X1, Y1, X2, Y2, …, Xn, Yn (просто перечисляются координаты всех вершин многоугольника).
nohref Определяет, что данной области не соответствует никакая ссылка. Где это может пригодиться? Ну, например, если вы хотите сделать ссылку не в виде круга, а в виде кольца
alt Альтернативный текст для выделенной области, используется невизуальными браузерами.
title Название выделенной области, выводится в виде подсказки, всплывающей при наведении курсора на область рисунка.
target Значение этого аттрибута (“_top”, “_blank”, “_self” или “_parent”) определяет, в каком окне будет открыт документ

В результате вот что у нас получилось, покликайте по пиктограммам:

Пример изображения-карты

В качестве примера вместо ссылки Link 1 , я вставил реальную ссылку, ведущую на поздравительный сайт, который совсем недавно помогал делать одному с воему другу к Новому году. Посмотреть реальный пример работы можно здесь. Каждая из миниатюрных фотографий на главной странице, ведёт на отдельную web-страницу с персональными поздравлениями конкретному человеку, т.е. маленькая фотография я вляется отдельной ссылкой.

А вместо ссылки Link 8 , для наглядности, я сделал ссылку на главную страницу своего сайта http://www.LuksWeb.ru/

Остальные ссылки Link 2Link 7 , никуда не ведут, просто не прописать URL адреса.

Как Вы понимаете ссылки можно сделать, как абсолютные, так и относительные, разницы нет никакой.

Изображения карты, достаточно широко распространены и используются довольно часто в практике web-мастеров. Ведь как Вы поняли, в качестве ссылок, можно создавать довольно сложные области, кроме того, на одной карте всегда можно комбинировать и выделять фигуры любой конфигурации.

Для того, чтобы рассчитать точно координаты нужной части изображения существуют специальные программы. Одна из них называется MapEdit. Но я вполне обхожусь и визуальным редактором Dreamweaver, здесь для этого есть все необходимые функции.

АВТОРСКИЕ ПРАВА
Источник: luksweb.ru
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

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

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB