
Как сделать картинку ссылкой в html на сайте
Добрый день. Как сделать картинку ссылкой в html? Примерно год назад, я написал статью: — «Как сделать флешь баннер?». В данной статье я решил продолжить эту тему, но в более простом виде. Поговорим мы не про создание баннера, а просто о том, как сделать картинку ссылкой. Например, картинка вверху является ссылкой, ведущей на мой партнерский курс «Как снять фильм». Можете кликнуть, и убедиться, как это работает!
Зачем нужно делать из картинки ссылку?
а) К примеру, у вас имеется красивая картиночка замечательного товара. Вы создаете из нее ссылку, вставляете её на определенный ресурс. Человек заходит на данный сайт, видит картинку, кликает по ней, и попадает в интернет-магазин, где находится этот товар!
Удобно, я думаю, да! Кликабельность по красивым изображениям выше, чем по простой заурядной ссылочке. Частенько под картинками прячут свои партнерские ссылки.
б) Если вы зарегистрировались в какой-нибудь партнерской программе, у вас есть свой сайт, а хозяин партнерской программы не предоставил нужных рекламных материалов. Что делать в этом случае?
Достаточно скопировать изображения его товара, поместить скриншот на сайт, а картинку сделать ссылкой. Это будет чем-то вроде баннера, но с меньшей нагрузкой на сайт. На мой взгляд, очень удобно и красиво. Тем более, если вы красиво рисуете (или знаете того, кто может вам красиво нарисовать определенный баннер). Делаете из этой картинки баннера ссылку и опять-таки кликабельность по данной картинке баннеру повышается.
в) Третья причина, похожа на вторую. Я думаю, что не открою вам секрет, что из-за баннеров значительно повышается нагрузка на сайт. Ведь что такое чужой баннер на вашем сайте?
Это изображение, находящееся на постороннем ресурсе, которое ваш сайт запрашивает вовремя загрузки одной из своих страниц. Суть тут в том, что время этого запроса может значительно различаться, от долей секунды, до нескольких секунд.
Например, у меня раньше на сайте стоял статический баннер от одной известной компании. Баннер был красивым, с постоянно меняющимися картинками. Но суть в том, что он очень сильно тормозил время загрузки сайта. Время загрузки доходило до 50 секунд. Это очень много!
Как только я удалил данный баннер, мой блог стал загружаться в разы быстрее (сайт начал загружаться за 1.5 секунды, а не за 50!)! То есть, можно создать скриншот данного баннера, в скриншот вставить ссылочку и время его загрузки будет не несколько секунд, а доли секунды! Хотя, конечно, не так красиво. Он не будет меняться, но время загрузки сайта дороже!
г) Я думаю, что не удивлю веб. мастеров, если скажу, что часть ваших баннеров пользователи элементарно не видят. В браузерах таких людей стоит расширение «Анти-блок» или «Adguard». Данные расширения элементарно блокируют рекламу. В том числе и часть баннеров.
Если же у вас будет стоять картинка ссылка, анти блок подобный баннер воспримет воспринимать как обычное изображение, и ни какой блокировки. Например, у меня стоял определенное время баннер «живые картинки», но по нему было мало кликов. Я в начале не понимал в чем дело, потом увидел, что «Adguard» его просто блокирует.
Я зашел на сайт производителя, сделал скриншот понравившейся мне части материала, создал из картинки ссылку и результат налицо, не один блокиратор его больше не блокирует. Причем, копия вышла даже более красивой, чем оригинал, и отлично работает, можете убедиться сами!
д) Еще одной причиной, почему лучше сделать из баннера просто картинку, я бы назвал то, что поисковики, особенно Гугл, не любят, когда много рекламы на сайте. А вашу картинку ссылку, они станут воспринимать, просто как еще одно изображение, а не как рекламу. Удобно? Думаю, да! Но, давайте вернемся к сути нашего вопроса.
Как сделать картинку ссылкой в сайдбаре
Делается это довольно просто. Я приведу конструкцию подобного изображения со ссылкой:
<a href="адрес ссылочки"><img src="адрес изображения"
alt=""
/></a>
В адрес ссылки вставляем ссылочку полностью, причем с http:// и прочими вещами (хотя это не всегда обязательно, но не заморачивайтесь по данному поводу). Тоже относится и к адресу изображения.
Как узнать адрес вашего изображения? Щёлкните по нему мышкой и в новом окошке вверху вы увидите вашу ссылочку. Или, войдя в админ панель, выбираем «Медиафайлы» — «Библиотека» и просматриваете все ваши изображения на сайте.
Находите нужное, кликаете по ссылке вверху, и просматриваете ссылочку.
Также, хочу добавить, что, если вы желаете, чтобы ваша картиночка открывалась в новой вкладке, желательно добавить target=»_blank» в данный код.
Соответственно, наш код примет вид.
<
a
href
="адрес ссылочки"
target
="_
blank
"><
img
src
=" адрес изображения "
alt
=""
/></
a
>
Изображения на блогах чаще всего находятся в папках /wp-content/uploads/ или /images/.
По сути, приведенный выше код является готовым для вставки в ваши сайдбары. Можно его сделать по центру, поместив между тегами <center>…</center>, или кодом <p align="center">…
</p>
Как видите, всё довольно просто.
Советую почитать: — Как заработать в интернете 36 способов и Как скачать музыку с ВК
Как сделать картинку ссылкой в тексте статьи
Это относится к сайтам на движках WordPress. Здесь все также довольно просто. Картинка уже загружена на ваш сайт. Вносим её в текст. Выделяем картиночку левой кнопочкой мышки. Далее, нажимаем на знак ссылки в верху «Визуальной панели».
В новом окошке в первую строчку вставляем нужную ссылку партнерку, затем название картинки и указываем «открывать в новой вкладке». Сохраняем и публикуем.
Применяем тег <img>
Для вставки картинки на ресурс, можно применить тег <img>. Он имеет 4 необходимых атрибута:
src – показывает путь до элемента с изображением, и как он отображается на дисплее;
width и height – границы картинки. Данные размеры дают возможность подобрать место для картинки, чтобы она быстрее грузилась;
alt – альтернативное название.
<img src=»images/cat.jpg» width=»600″ height=»200″ alt=»Котик»>
Чтобы создавать ссылки, мы применим тег <a>. Для того, чтобы из изображения сделать ссылочку, мы это изображение поместим внутри данного тега <a>:
<a href=»https://htmlacademy.ru»> <img src=»images/cat.jpg» width=»600″ height=»200″ width=»600″></a>
Адрес нужной нам ссылочки нужно задать с применением атрибута href.
Довольно часто картинки ссылочки применяются в галереях. Например, на уменьшенную версию картинки устанавливается ссылочка, ведущая на полный размер изображения, или на другую страницу, где находится нужное нам изображение и подпись к нему.
Как обратить внимание на картинку-ссылочку?
Чтобы сделать картинку-ссылочку более заметной, можно сделать её увеличивающейся, или подсветить её с помощью цвета во время наведения на неё мышкой.
Для того, чтобы изображение-ссылочка изменяла свой цвет, нужно в её стилях прописать следующее состояние:
a:hover img { background-color: yellow; }
Состояние :hover сработает, если человек наведёт на неё курсор. Но, если изображение полностью исчезнет, а вместо изображения возникнет яркое свечение, то человек не сумеет вовремя понять, какая это была картинка, и что на ней изображено?
Если же вы решите сделать полупрозрачное свечение, и чтобы изображение просвечивалось сквозь цвет, то нужно указать свойство opacity:
a:hover img { background-color: yellow; opacity: 0.5;}
Данное свойство укажет степень полупрозрачности картинки. Величина 0 будет показывать полную прозрачность, а величина 1 – полную непрозрачность. Можно поставить любую степень, от 0, до 1, для получения нужного эффекта прозрачности.
На нижнем изображении мы видим применённое свойство :hover во время наведения мышки.
Для увеличения изображения во время наведения мышки, нужно применить свойство transform.
a:hover img { transform: scale(1.5); }
При применении данной формулы изображение будет увеличено в 1,5 раза. Тут можно вместо цифры 1,5 поставить любое число, которое нам подходит, для увеличения или уменьшение изображение. Если мы поставим цифру, которая больше 1, то мы увеличим изображение. Если же мы поставим вариацию от 0 до 1, то изображение уменьшится.
К примеру, для уменьшения изображения в два раза, нужно указать вариацию 0,5.
Если вы любите работать с картинками, и другими графическими редакторами, предлагаю посмотреть мою статью: — ФотоШоу Про. Я думаю, вам будет интересно!
Если у вас есть другие способы, как сделать картинку ссылкой в html, буду рад, если вы их напишите в комментариях. Успехов!
С уважением, Андрей Зимин! 23.08.2022 г.
Статья отредактирована 18.06.2023
Анекдот:
Здравствуйте, Андрей!
Актуальная статья. Очень многие люди не знают,
как это сделать.
Добрый день, Мария. Я тоже до определенного времени просто не придавал значение картинкам ссылкам. Потом, когда часть моих баннеров пользователи просто не видели из-за блокиратора, я начал изучать это дело.
Спасибо.Интересная статья,обязательно воспользуюсь :razz:
Я рад, что вам понравился данный метод!
Очень хорошая идея делать картинки с ссылкой. Написано понятно и доступно как это сделать Благодарю!
Спасибо, Людмила.
Полезный сайт, много интересного материала, нужного блоггерам.
Спасибо Анатолий!
Для того, чтобы сделать виджет с баннером в сайдбар, я проделываю следующее: Создаю новую запись в редакторе админки. Добавляю туда картинку (Добавить медиафайл). Перехожу в html-режим. Прописываю ссылку (со всеми атрибутами: nofollow (если требуется), target=»_blank»). Сформировав код, открываю Виджеты — Текст — вставляю текст и устанавливаю виджет в сайдбар.
А вообще существуют интересные способы, как не просто сделать картинку ссылкой, но и скрыть эту ссылку от поисковых систем. Для читателя она остается ссылкой и работает. А ПС за ссылку ее не считают.
Данная ссылка скрывается под Goto. Я сейчас nofollow и noindex не использую, это прошлый век. Поисковики всё равно их читают! Вы мне подали идею, нужно будет написать статью, как скрывать ссылки через Goto. У меня также комментарии через них закрыты, и не только комментарии. Поисковики их не видят, но они отлично работают! :)
Не совсем согласен насчет nofollow. Если в коде страницы стоит мета-тег robots «noindex, nofollow», страница не индексируется. Так закрыты рубрики, теги, архивы. То-есть, директивы все же действуют. Другое дело, что по ссылке с nofollow «утекает» (правда, как я понимаю, не на конкретную страницу, а «в никуда»), статистический вес моей страницы.
С Goto я дела не имел никогда. А чтобы скрыть «лишние» ссылки (правда, лишь в тексте статьи — где они могут быть как в виде картинок, кнопок, так и в текстовом виде -, а не в сайдбаре), использую так называемые ajax-ссылки. Это, конечно, требует редактирования файла функций, файла header и файла style.css. Но один раз настраиваешь — и никаких проблем.
Сама «технология», конечно, не моя, а Виталия Кириллова (СЕО-Маяк).
Комментарии, «дубли реплитуком» у меня тоже закрыты по его методам. Да и еще многое…
А про Goto пишите — интересно!
Крутая акция
Хорошая инструкция! Я раньше тоже всему этому училась, на сегодняшний день уже намного проще подобные вопросы решать. Кому интересна эта тема, советую прочесть эту статью ещё: ifish2.ru/kak-sdelat-ssylku-na-sajt, мне она очень помогла!
Спасибо Вам огромное! Только благодаря этой статье у меня получилось сделать всё как надо! Процветания вашему сайту!
И вам Спасибо, Наталия! :)
Спасибо. Искал как сделать и тут наткнулся на статью
Я рад, Евгений, что смог вам помочь!
Тьфу!
Я до думал есть вариант в сам код картинки вставлять ссылку, попробуйте картинку открыть блокнотом, а тут банальщина!
——-
Если долго не моргая смотреть на звёзды, то рано или поздно моргнёшь!
В сам код картинки вставлять ссылку, и затем вставлять данную картинку на сторонний ресурс? На каждом ресурсе свои правила вставки ссылки в картинку. На некоторых ресурсах, вроде Фейсбука, нужны дополнительные редиректы. Как правило, они даются на других сайтах за деньги! :)
Для Фейсбука, к примеру, достаточно оплатить 200 рублей в месяц, и вставляйте столько редиректов, сколько нужно! ;)