Как сделать шапку сайта кликабельной

Сервис карт изображений

Как сделать шапку сайта кликабельной

Привет!

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

Многие люди, только недавно познакомившиеся с CMS WordPress и особо не разбирающиеся в HTML, часто хотят установить у себя на сайте не только красивую и запоминающуюся шапку, но и сделать ее кликабельной. Согласитесь, ведь мало создать правильно сбалансированную и информативную картинку в фотошопе, которая будет радовать глаз посетителя и нести в себе некую информацию. Можно сделать ее полезной не только с визуальной точки зрения, но и так сказать с “фигуральной”. Сделать так, чтобы элементы в шапке сайта (иконки соцсетей, значки, лого) были образно говоря кликабельны. Чтобы при клике, они вели на определенную страницу на сайте или на нужный вам URL адрес.

Для того, чтобы сделать шапку кликабельной, мы рассмотрим самый простой способ, потому как, это интересно в основном начинающим, ведь опытных вебмастеров этот вопрос мало интересует.

Для создания кликабельной шапки мы используем тэг “headmap”. Это карта нашей шапки, в которой мы просто определим координаты необходимых нам элементов и зададим им URL адреса. Каждый выделенный участок должен иметь свои координаты и обозначатся тэгом “coords”.

Должен сказать, что сложного здесь ничего нет, все что от вас потребуется, это изменить пару строк в коде и установить его в нужное место.

Для начала нам необходимо задать ID нашей шапке.

<header id="branding" role"banner">
<IMG align="bottom" width="1300" height="375" usemap="#headmap" src="здесть адрес вашей картинки (шапки)">
В сгенерированном коде с сервиса ниже, замените ID на headmap

ВНИМАНИЕ! Ширина и высота должны соответствовать реальному размеру вашей шапки (иначе координаты поплывут).

Затем переходим по ЭТОМУ адресу.

  1. Загружаем изображение и жмем на галочку.
  2. Выделяем нужную область на изображении.
  3. Вписываем URL адрес, куда будет вести выделенный участок.
  4. Укажите “new window”, чтобы в сгенерированном коде были тэги target=»_blank» (открывать ссылку в новом окне).
  5. Копируем код под изображением.
Сервис карт изображенийВставляем оба кода в нужное место в файле “header.php”
Место для вставки кода
Aliexpress INTAliexpress INTAliexpress INT

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *