Используем изображение-карту в навигации

У оригинальных и обычных сайтов можно изменить раздел навигации, чтобы он имел приятный вид. Как же можно изменить такой список ссылок? Один из вариантов — использовать изображение в качестве ссылки. Такой способ будет хорош для одиночных ссылок, где он не мешает никому. А вот с группой ссылок возникает проблема, навигация будет «пестреть». Можно, конечно, подобрать изображения, построить их вместе. Зачем же мучаться, когда можно использовать одно изображение в качестве целой карты?

Это действительно, такое сейчас сделаем, причем только при помощи HTML. Процесс разделим на несколько шагов. Во-первых, найдем подходящее изображение. Плюс в этих ссылках в том, что вместо текста ссылки можно поставить картинку, буквы, схему, фотографию. Оставим пустое изображение — пустота будет содержать ссылку.

Изображение вставляем в код страницы, тегом . Например, . Затем, создаем саму карту. Нам в этом поможет парный тег . В первом теге указываем имя. Такой код : создаст карту с названием map1. На отображение Web-страницы пока он никак не влияет. Поэтому привяжем конкретную карту к нашему изображению. Добавим атрибут к картинке, его название usemap. Его значение должно соответствовать названию созданной карты. Но, необходимо прибавить решетку к началу названия. Вот так : . Все, карта привязана к изображению.

Теперь выделим области на изображении под ссылки. : [ SHAPE=rect ] COORDS =90, 40, 130, 30 HREF=adress.ru. Данный элемент создаст прямоугольную область, где правым верхним углом будет точка с координатами 90 по оси x, и 40 по оси y, левым нижним — точка с 130 по x и 30 по y. При клике на эту область перейдем по ссылке на adress.ru. В атрибуте SHAPE возможны три значения — rect, cricle и poly. В случае, если указан cricle, надо указать координаты центра, и радиус круга. Если же poly, то создается многоугольник, в атрибуте COORDS указывается координаты каждой вершины. Вот и все, чтобы создавать такие карты.

Подобная навигация поможет вам в продвижение сайта, как в Яндексе, так и Гугле.