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

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

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

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

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

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

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

Теперь подробнее. Вы нашли нужную  вам картинку в интернете. Разумеется у нее есть адрес. Для того, что бы его узнать, нужно на странице какого либо сайта кликнуть правой кнопкой мыши по картинке и из контекстного меню выбрать строку «Открыть изображение». В появившейся адресной строке браузера вы увидите адрес картинки.  Например эта картинка:

имеет вот такой адрес: https://prt56.ru/wp-content/uploads/2018/08/antifishing-1.jpg 

Теперь, допустим, я хочу  переадресовать посетителя блога (указав ему, что картинка кликабельна) на нужную мне страницу.  Например, на страницу моего блога https://prt56.ru/100-servisov-dlya-seo-audita-sajtov/ .

Значит в режиме НTML своего редактора новых записей мой код должен выглядеть как-то так:

<a href=»https://prt56.ru/100-servisov-dlya-seo-audita-sajtov/» ><img src=» https://prt56.ru/wp-content/uploads/2018/08/antifishing-1.jpg» ></a>.

Адрес страницы я указал тот, на котором разместил соответствующую статью: «100 сервисов для seo-аудита сайтов».

А вот  та же самая самая картинка, но теперь она уже кликабельна. Кликаем и переходим на вышеуказанную полезную статью:

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

Впрочем, что-то подобное представляют сайты для работы с партнерами: баннеры сайтов-партнеров и тизерной рекламы, счетчики посещаемости и т. п. — все это ничто иное, как кликабельные картинки.