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

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

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

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

Теперь выделим области на изображении под ссылки. <AREA> : <AREA> [ 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 указывается координаты каждой вершины. Вот и все, чтобы создавать такие карты.

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


Оставить комментарий или два

Я не робот!

Оповещать о новых комментариях по RSS