Волшебство HTML. Как сделать шапку для сайта активной

Наша шапка для сайта имеет 5 элементов навигации: две текстовые надписи, и три изображения. В зависимости от требований вашего ресурса, это может быть и несколько десятков разных слов-названий, и столько же картинок — миниатюр. Каждый элемент шапки для сайта у нас превратится в активную ссылку! Далее открываем блокнот и аккуратно, в точной последовательности записываем координаты каждого элемента шапки сайта. Найдите в боковой панели Gimp инструмент «Измеритель», и кликните по нему. Теперь ставим точку у левого края картинки, нажимаем левую кнопку мыши, и останавливаем у верхней левой границы ссылки в области первого текста. В нашем случае измеритель показал, что расстояние от левого края изображения до начала верха области активной ссылки — около 17 пикселей. Значит, в блокноте записываем: 17. Теперь вымеряем расстояние от верхнего края шапки до начала верха области активной ссылки, здесь значение чуть поменьше, 14 пикселей. Идем дальше, и находим расстояние от левого края шапки, до крайней нижней точки области активной ссылки. У нас получается 256 пикселей. Повторяем замер сверху, до крайней нижней точки будущей активной зоны вокруг текста, получилось 50 пикселей. Запись в блокноте выглядит так: 17,14,256,50. Надеемся, вам стал понятен алгоритм и схема работы?

Все измерения для визуальной карты сайта в шапке делаются именно в такой последовательности, «левый верхний угол, длина и высота-правый нижний угол, длина и высота». Все, теперь остается просчитать параметры остальных элементов на шапке сайта, и внести их в список. Помните, что последовательность такая же — слева направо. Для множественных точек на визуальной карте, которая у вас получится из шапки, приоритет всегда будет иметь изображение слева. То есть, вторым по списку у нас, в шапке www.hitech.tomsk.ru, будет элемент «вторая текстовая строка сверху».После всех замеров у нас в блокноте выставлены параметры всех объектов:

Первая строка - 17,14,256,50

Вторая строка - 17,70,235,100

Большой прямоугольник — 273,19,493,195

Средний прямоугольник — 549,50,696,168

Маленький прямоугольник — 760,70,858,148

Теперь находим расположение файла шапки в коде страницы, и немного видоизменяем ее, удалив обычное значение (строку с указанием файла header), и вставив такой код:

<map name="coordinates"> <area shape="rect" coords="17,14,256,50" href="/%D0%A1%D1%81%D1%8B%D0%BB%D0%BA%D0%B0%20%D0%BD%D0%B0%20%D0%BD%D1%83%D0%B6%D0%BD%D1%83%D1%8E%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%83"> <area shape="rect" coords="17,70,235,100" href="/%D0%A1%D1%81%D1%8B%D0%BB%D0%BA%D0%B0%20%D0%BD%D0%B0%20%D0%BD%D1%83%D0%B6%D0%BD%D1%83%D1%8E%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%83"> <area shape="rect" coords="273,19,493,195" href="/%D0%A1%D1%81%D1%8B%D0%BB%D0%BA%D0%B0%20%D0%BD%D0%B0%20%D0%BD%D1%83%D0%B6%D0%BD%D1%83%D1%8E%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%83"> <area shape="rect" coords="549,50,696,168" href="/%D0%A1%D1%81%D1%8B%D0%BB%D0%BA%D0%B0%20%D0%BD%D0%B0%20%D0%BD%D1%83%D0%B6%D0%BD%D1%83%D1%8E%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%83"> <area shape="rect" coords="760,70,858,148" href="/%D0%A1%D1%81%D1%8B%D0%BB%D0%BA%D0%B0%20%D0%BD%D0%B0%20%D0%BD%D1%83%D0%B6%D0%BD%D1%83%D1%8E%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%83"> </map>

Как можно понять, каждая строка — это обозначение границ активной ссылки на картинке шапки сайта. При наведении курсора мыши на эту область мы получим такой эффект, как на нашей заготовке:

Если ваш сайт управляется CMS, то с кодом придется немного поиграть, в некоторых случаях требуется оставлять и строчку шапки, и добавлять код map. Таким образом можно активировать не только шапку сайта, этот код HTML способен "оживить" любое изображение на сайте. Проявляйте фантазию, составьте карту в шапке сайта так, чтобы ее хотелось рассматривать снова и снова, и вашему сайту гарантирован успех. С пожеланиями удач вашему сайту в России, команда www.hitech.tomsk.ru!