Как создать кликабельное изображение

В этом руководстве объясняется, как сделать картинку ссылкой:

Как создать кликабельное изображение Создать кликабельное изображение не так сложно, как может показаться. Есть пару методов сделать это. Я расскажу вам о двух возможных вариантах.

Изображение, с которым мы будем работать

В рамках этого руководства я буду использовать в виде примера приведенное ниже изображение:

Как создать кликабельное изображение Сначала я опишу ручной способ, который подойдет для любого HTML-кода. Это способ, который я рекомендую.

В виде второго варианта я расскажу о быстром обходном пути, как сделать картинку ссылкой в HTML, который следует использовать в WordPress:

Как создать кликабельное изображение Первый вариант предполагает ручное добавление HTML-кода для кликабельного картинки. Хотя это звучит пугающе, фактически все делается просто и быстро.

Вариант 1, Шаг 1: Возьмите необходимые URL-адреса

Чтобы завершить этот шаг, изображение, которое вы хотели бы сделать кликабельным, должно быть загружено на веб-сайт.

Чтобы создать необходимый HTML-код, необходимо собрать воедино два фрагмента информации. Я рекомендую сначала открыть новый текстовый файл, куда можно будет вставлять данные URL-адреса.

Вот что необходимо:

1. URL-адрес целевой страницы

Адрес страницы / поста / веб-сайта, куда вы планируете перенаправить посетителя после того, как он кликнет по изображению. Для этого перейдите на страницу, которую вы планируете использовать и скопируйте URL из адресной строки браузера:

Как создать кликабельное изображение В моем случае URL-адрес целевой страницы:

https://amylynnandrews.com/how-to-start-a-blog/

После того, как вы скопируете URL-адрес целевой страницы, вставьте его в открытый текстовый документ, чтобы не потерять, когда скопируете следующий URL-адрес.

2. URL-адрес картинки

Это URL-адрес, определяющий, где находится изображение в интернете. Перед тем, как сделать ссылку на картинку с компьютера, необходимо понять, что все картинки, доступные в Сети, размещаются где-то. Они должны быть доступны для просмотра.

Самый простой метод найти URL-адрес картинки — это перейти на веб-страницу, на которой оно отображается. Например, если вы загрузили изображение на веб-сайт, перейдите на страницу, где оно выводится.

Далее:

  • Если вы посетитель Windows, кликните по изображению правой кнопкой мыши. После этого появится так называемое контекстное меню. В нем надо выбрать пункт «Скопировать URL-адрес картинки»;
  • Если вы посетитель Mac, кликните по изображению, удерживая нажатой клавишу control. После этого появится небольшое меню, в котором необходимо будет выбрать пункт «Скопировать адрес картинки».

URL-адрес картинки будет сохранен в буфере обмена, и вы сможете легко вставить его.

Я прокрутила страницу вверх, навела курсор мыши на изображение и нажала клавишу control, поскольку я работаю на Mac. Обратите внимание, что я выбрала в меню пункт Copy Image Address:

Как создать кликабельное изображение Выбрав этот пункт меню, я скопировала URL-адрес картинки в буфер обмена. После этого я вставляю его в заранее открытый текстовый документ:

https://amylynnandrews.com/wp-content/uploads/2016/01/how-to-create-a-blog.jpg

Если вы являетесь посетителем WordPress, существует альтернативный метод поиска URL-адреса картинки. В панели администрирования WordPress перейдите в меню Медиа> Библиотека медиа. Используйте окно поиска или прокрутите окно вниз, чтобы найти изображение. Нажмите на него. В появившемся окне выделите и скопируйте весь фрагмент кода в поле ввода URL.

Вариант 1, Шаг 2: Создайте код

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

<a href="http://LandingPageURL.com"> <img src = "http: // FileURL" /> </a>

Сейчас в текстовом документе замените выделенные жирным шрифтом два URL-адреса скопированными ранее URL-адресами(то есть URL-адресом целевой страницы и URL-адресом картинки).

Для этого выделите и скопируйте URL-адрес целевой страницы. Далее выделите в коде http://LandingPageURL.com(также в текстовом документе). После того, как выделите его, нажмите «Вставить», и в этом месте должен вставиться URL-адрес целевой страницы.

На данный момент мой код из такого:

<a href="http://LandingPageURL.com"><img src="http://FileURL" /></a>

стал таким(с замененным URL-адресом целевой страницы):

<a href="https://amylynnandrews.com/how-to-start-a-blog/"><img src="http://FileURL" /></a>

Сейчас сделайте то же самое для URL-адреса файла картинки. Выделите и скопируйте URL-адрес файла картинки, далее выделите http: // FileURL и замените его только что скопированным адресом картинки.

Сейчас мой программный код завершен. Из такого:

<a href="https://amylynnandrews.com/how-to-start-a-blog/"><img src="http://FileURL" /></a>

он стал таким:

<a href="https://amylynnandrews.com/how-to-start-a-blog/"><img src="https://amylynnandrews.com/wp-content/uploads/2016/01/how-to-create-a-blog.jpg" /></a>

Будьте внимательны, чтобы случайно не удалить кавычки или не добавить два раза http: // или https: //.

Как сделать так, чтобы кликабельное изображение открывалось в новой вкладке

Как сделать картинку ссылкой и чтобы она открывалась на новой вкладке. Для этого добавьте к первой части кода атрибут target =»_ blank». К примеру:

<a href="http://LandingPageURL.com" target="_blank"><img src="http://FileURL" /></a>

Вот как будет выглядеть мой код, если я хочу, чтобы ссылка открывалась на новой вкладке:

<a href="https://amylynnandrews.com/how-to-start-a-blog/" target="_blank"><img src="https://amylynnandrews.com/wp-content/uploads/2016/01/how-to-create-a-blog.jpg" /></a>

Как добавить к кликабельному изображению партнерскую ссылку

Вы планируете добавить к изображению партнерскую ссылку? Нет проблем.

Вам необходимо выполнить те же действия, которые были описаны выше, но http://LandingPageURL.com необходимо заменить на партнерскую ссылку.

Важно!

Также необходимо добавить к партнерской ссылке атрибут nofollow. Это делается для того, чтобы избежать негативных последствий. Поисковые системы не хотят, чтобы на результаты их органического поиска влияли коммерческие ссылки.

Вот, как будет выглядеть мой программный код, если я захочу, чтобы ссылка-изображение открывалась в новом окне, при том, что это партнерская ссылка:

<a href="https://MyAffiliateLink.com" target="_blank" rel="nofollow"><img src="https://amylynnandrews.com/wp-content/uploads/2016/01/how-to-create-a-blog.jpg" /></a>

Все готово!

Сейчас вы можете без проблем взять фрагмент HTML-кода от <a href…> до </a> с блоком <img src..> между ними и вставлять его везде, где необходимо отображать изображение:

Как создать кликабельное изображение Описанный выше вариант, как сделать картинку ссылкой в HTML, это более простой способ. Но если вы предпочитаете иметь дело с меньшим числом HTML-кода, вот ещё один метод. Для него мы используем иное изображение.

Идея состоит в том, чтобы создать новую запись, добавить фотографию, задать для нее ссылку, а далее захватить HTML и использовать его в ином месте. Приведенные ниже инструкции предназначены для WordPress, но их можно без проблем использовать и в Blogger.

Вариант 2, шаг 1: Сохранение картинки на компьютере

Если вы ещё не сохранили изображение на компьютере, сделайте это. Кликните правой кнопкой мыши(кликните мышью на Mac) по изображению и выберите пункт «Сохранить изображение как …»

Вариант 2, шаг 2: Создайте новую запись в WordPress

В панели администрирования WordPress создайте новую запись(Записи — Добавить).

Вариант 2, шаг 3: Загрузите изображение

Перед тем, как сделать картинку ссылкой в CSS, убедитесь, что у вас открыта вкладка «Визуально»(указано в правом верхнем углу панели редактирования записи). Нажмите кнопку «Добавить медиа»:

Как создать кликабельное изображение

Вариант 2, шаг 4: Добавьте изображение в запись

На вкладке «Загрузить файлы» (вверху слева) можно без труда перетащить изображение в эту панель или нажать кнопку «Выбрать файлы», чтобы найти изображение на компьютере:

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

  1. Убедитесь, что изображение, с которым вы планируете работать, проверено;
  2. Для картинки будет автоматически добавлен title . Хорошее название будет способствовать SEO , так что убедитесь, что вы переименовали изображение перед загрузкой. Если вам необходимо начать все заново, vj;yj удалить это изображение, нажав ссылку «Удалить навсегда» рядом с миниатюрой картинки справа;
  3. Перед тем, как сделать URL ссылку на картинку, установите значение для атрибута alt . Обычно я задаю для него то же значение, что и для названия картинки, только без дефисов;
  4. Вы хотели бы, чтобы кликабельное изображение было выровнено? Выберите нужное значение в выпадающем меню;
  5. Здесь же можно без труда сделать изображение кликабельным! В выпадающем меню выберите пункт «Пользовательский URL ». Введите URL-адрес веб-страницы, на которую вы хотели бы сослаться;
  6. Вы планируете, чтобы изображение имело иные размеры? Данные настройки задаются в разделе Параметра — Медиафайлы ;
  7. Нажмите кнопку «Вставить в запись».

Сейчас изображение появится в окне редактирования записи:

Как создать кликабельное изображение

Вариант 2, Шаг 5. Чтобы изображение открывалось на новой вкладке

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

  1. Если это так, нажмите на изображение, чтобы выделить его. Оно потускнеет;
  2. Далее кликните по иконке ссылки (она выглядит как звено цепи);
  3. В появившемся маленьком окне установите флажок «Открыть ссылку в новом окне / вкладке»;
  4. Нажмите кнопку «Обновить».
Как создать кликабельное изображение

Вариант 2, шаг 6: Скопируйте HTML-код

Как сделать картинку ссылкой? Перейдите на вкладку «Текст»:

Как создать кликабельное изображение На данной вкладке выводится HTML-код картинки. Скопируйте его и вставьте, куда вам необходимо (к примеру, в виджет боковой панели).

Вариант 2, Шаг 7 (необязательный): Если это партнерская ссылка, задайте для нее атрибут nofollow

Если изображение связано с партнерской ссылкой, вам необходимо задать для нее атрибут nofollow . Атрибут nofollow указывает, что поисковые роботы не должны проходить по ссылкам при индексировании веб-сайта. Чтобы добавить атрибут nofollow , добавьте приведенный ниже фрагмент кода в HTML перед закрывающимся тегом (>) первой ссылки:

rel="nofollow"

На рисунке, приведенном ниже, показано, как сделать картинку ссылкой в HTML . Обратите внимание на выделенный текст:

Как создать кликабельное изображение Сейчас можно скопировать этот HTML-код и вставить его там, где надо вывести изображение.

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

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