Создаем кликабельную картинку

Вопрос кликабельности картинки наверное возникает у каждого вебмастера. Как ее сделать такой, что бы при клике по картинке она, как ссылка, приводила на нужный автору блога(сайта) на нужную ему страницу(URL) в браузере?

Для создания кликабельных картинок( по сути баннеров) можно использовать специальные сервисы-редакторы, однако, как мне кажется, не на всех платформах это возможно. Проще научиться в сообщениях  в режиме HTML составлять небольшие коды используя для этого специальные теги.

Для вывода изображений в html используется тег <img>. Выглядит это таким образом: <img src=»адрес картинки»

Разумеется этого недостаточно. Теперь нам нужен адрес(URL) страницы, на которую будет осуществлен переход при клике на картинку. Для этого используется тег <a>. Таким вот образом:<a href=»адрес ссылки» >Название ссылки, если необходимо</a>.

Ну, а теперь адрес картинки вставляем в «тело» этой анкороной ссылки: <a href=»адрес ссылки» ><img src=»адрес картинки» ></a>

Это объединение и даст возможность получить кликабельную картинку.

Теперь подробнее. Вы нашли нужную  вам картинку в интернете. Разумеется у нее есть адрес. Для того, что бы его узнать, нужно на странице какого либо сайта кликнуть правой кнопкой мыши по картинке и из контекстного меню выбрать строку «Открыть изображение». В появившейся адресной строке браузера вы увидите адрес картинки.  Например эта картинка:
alpha_business_key
имеет вот такой адрес: http://prt56.ru/wp-content/uploads/2012/01/alpha_business_key_white1.png. Теперь, допустим, я хочу  переадресовать посетителя блога (указав ему, что картинка кликабельна) на нужную мне страницу. Значит в режиме НTML своего редактора новых записей мой код должен выглядеть как-то так:

<a href=»http://prt56.ru/internet-bisnes/» ><img src=» http://prt56.ru/wp-content/uploads/2012/01/alpha_business_key_white1.png» ></a>

Адрес страницы я указал тот, на котором я разместил соответствующую статью «ВСЕ СКРЫТЫЕ МОМЕНТЫ И КЛЮЧИ УСПЕХА ИНТЕРНЕТ-БИЗНЕСА ДЛЯ НАЧИНАЮЩИХ». А вот  та же самая самая картинка, но теперь она уже кликабельна. Кликаем и переходим на вышеуказанную полезную статью:


Кроме того я теперь использую созданные таким образом коды для кликабельных картинок-виджетов сайдбара, используя виджет «Текст». Впрочем, что-то подобное представляют сайты для работы с партнерами: баннеры сайтов-партнеров и тизерной рекламы, счетчики посещаемости и т. п. — ничто иное, как кликабельные картинки.

2 комментариев “Создаем кликабельную картинку

  1. Андрей:

    Спасибо за полезную и интересную статью!

  2. Геннадий:

    Пожалуйста, Андрей.

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

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