Не просто картинка!

УРОК «Как сделать карту-изображение»

Дорогие друзья!

В этом уроке мы с вами научимся делать карту-изображение - очень интересный объект, когда вы наводите курсор мышки на изображение (шапку сайта, меню навигации, другое какое-то ключевое изображение) и видите, что курсор меняется на руку с пальцем, то есть некоторые области этого изображения являются ссылками. По ним можно щёлкнуть и перейти на страницу с описанием. Как же это делается?

Эти карты могут быть клиентскими и серверными. В случае серверной карты данные сначала передаются на сервер и там уже определяется, к какой странице нужно перейти. Клиентская карта полностью обрабатыватся в браузере пользователя. Для нас в данный момент лучше всего подходит именно клиентская карта, её мы и будет сейчас учиться делать. Давайте посмотрим как это делается на примере меню навигации. Допустим, нам нужно сделать навигацию по сайту, посвящённому любимому многими мультфильму "Тачки". Макет выглядит вот так:

Нам нужно привязать ссылки к изображениям машинок, то есть при клике по каждой машинке будет открываться страница с более подробным описанием и комментариями посетителей сайта. Очевидно, что нужно как-то подсказать браузеру эти активные области и их площади. Для описания таких областей используется контейнер <map>...</map> с единственным параметром name, который задает имя карты и используется потом для ссылки на эту карту. Создадим каркас нашей будущей карты:

Теперь карту нужно подключить к картинке, для этого в тег <img> надо добавить атрибут usemap, в качестве значения которого выступает имя нашей карты после значка решётки #:

Далее нам нужно описать конкретные активные области внутри нашей картинки. Для этого внутри контейнера <map> использются контейнеры <area>...</area> со следующими атрибутами:

• shape - определяет форму области, может принимать следующие значения:
  • rect - область в виде прямоугольника,
  • circle - область в виде круга,
  • poly - область в виде многоугольника,
  • default - вся область.
• coords - задает координаты отдельной области:
  • для rect задаются координаты верхнего левого и правого нижнего углов прямоугольника,
  • для circle задаются координаты центра круга и радиус,
  • для poly задаются координаты вершин многоугольника в нужном порядке;
• href - определяет адрес ссылки;
• target - применяется при использовании фреймов и указывает фрейм, в который нужно загрузить страницу;
• alt - задает альтернативный текст для активной области.

У нашей картинки будет 3 пямоугольных области и, значит, нам нужно 3 раза использовать контейнер <area> с координатами областей. Определение координат - это самый трудоёмкий процесс при кодировании карты. Для этих целей можно использовать специальные программы (Image Ready, например) или, как минимум, Photoshop. У нас области будут прямоугольные и определение координат не должно вызвать затруднений. В Photoshop я провела направляющие и теперь примерно могу определить координаты активных областей:

Добавим теперь теги area с определёнными координатами:

Вот что у нас, в конце концов, получилось:

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

Пробуйте и экспериментируйте. До встречи в следующем уроке!

Нравится