Карты - это способ сделать различные части одного графического изображения, разными гиперссылками. Они позволяют выделить отдельные области изображений и определить для каждой из них свое действие. В данном случае мы будем рассматривать возможность создания ссылок из различных участков одного графического файла (картинки). Допустим у Вас имеется например такой графические файл (или примерно такой):
В данном случае картинка взята произвольно, просто для примера. Здесь Вы видите скриншоты разных сайтов, объединенных на одной общей картинке. Допустим Вам нужно сделать, чтобы при клике на каждый из сайтов, изображенных на этой картинке (уменьшенное изображение), человек попадал именно на этот сайт. Т.е. разбить всю картинку примерно так:
Делается это достаточно просто. Пускай наше изображение, точнее графический файл, называется karta2.jpg . Размер картинки используемой здесь 400х255 пикселей. Сначала давайте посмотрим Листинг 1 такой разбивки:
Как видите, чтобы создать карту, нужно вставить в тэг <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 2 - Link 7 , никуда не ведут, просто не прописать URL адреса.
Как Вы понимаете ссылки можно сделать, как абсолютные, так и относительные, разницы нет никакой.
Изображения карты, достаточно широко распространены и используются довольно часто в практике web-мастеров. Ведь как Вы поняли, в качестве ссылок, можно создавать довольно сложные области, кроме того, на одной карте всегда можно комбинировать и выделять фигуры любой конфигурации.
Для того, чтобы рассчитать точно координаты нужной части изображения существуют специальные программы. Одна из них называется MapEdit. Но я вполне обхожусь и визуальным редактором Dreamweaver, здесь для этого есть все необходимые функции.
Классная статья. Обязательно применю на своём сайте!
Комментарии добавил(а): Константин Дата: 2011-01-15
Очень хорошая статья, спвсибо, Андрей!
Комментарии добавил(а): Torysan Дата: 2011-07-14
Здравствуйте, Андрей!
Хотела почитать эти статьи: "Заголовок HTML-документа. Что в нем может быть интересного?" и "Как изменить внешний вид курсора.", а кликая по ним перехожу на сайт http://www.mainlinki.ru/?id=73
...и ничего такого я там не нашла(
Комментарии добавил(а): АндрейК Дата: 2011-07-15
Битые ссылки исправил, спасибо что подсказали
Комментарии добавил(а): Дмитрий Дата: 2012-04-05
в одном месте shaRe...
Комментарии добавил(а): Юрий Дата: 2012-05-19
Андрей, здравствуйте! Спасибо большое Вам за такие ценные уроки, действительно очень мне помогли.
У меня есть к Вам просьба, если Вас не затруднит, обясните мне пожалуйста по <map> как мне справитсья с такой задачей: у меня есть круг, я хочу разделить его примерно на равные части (в центре квадраты, а около границ круга - обрезанные грацницей квадраты(надеюсь это не очень глупо звучит :D))
И к каждой части привязать возможность поменять ее цвет или загружить картинку.
Как это сделать и вообще возможно ли это?
Думаю Вам,как профессионалу это не составит проблем. Я совсем недавно занялся webmastering-ом, поэтому нуждаюсь в Вашем совете.
Если не найдете времени подумать над моим вопросом,сообщите пожалуйста, я попробую найти кого-нибудь еще.
Огромное спасибо!!!
С Уважением,
Юрий
Комментарии добавил(а): АндрейК Дата: 2012-05-20
Юрий, напишите мне по эл. почте, здесь не очень удобно обсуждать технические подробности вашего вопроса.
Комментарии добавил(а): Ivan Дата: 2012-07-26
Как мен определить координаты
сущиствует ли какя либо програма чтобы сделал всё сама
Комментарии добавил(а): Ivan Дата: 2012-07-26
Вот спустя некоторое время сам всё понял
Андрей ваша информация самая лучшая что я за 2 дня находил в инете огромное вам спасибо
если что приезжайте в испанию я вам по туризму помогу вот сайт http://www.gidvipturism.com
На это время только строитса
Комментарии добавил(а): Сергей Дата: 2014-04-14
Автоматический генератор map area http://crazysquirrel.ru/#!image_to_map_area
Комментарии добавил(а): Артём Дата: 2015-08-25
есть ли программысайты для быстрого определения координат у сложных фигур?
Комментарии добавил(а): newJS Дата: 2015-08-30
Артём, конечно есть, берите
_http://newjs.my1.ru/load/generator_kart_html/1-1-0-4