Как сделать картинку кликабельной?

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

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

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

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

Сначала я опишу ручной метод, который подойдет для любого 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-код и вставить его там, где необходимо вывести изображение.

Пожалуйста, оставляйте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, отклики, дизлайки, подписки, лайки!