Как Сделать Картинку (Ссылкой) в HTML За Пару Минут

Как сделать картинку ссылкой в 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.

Если вы любите работать с картинками, и другими графическими редакторами, предлагаю посмотреть мою статью: — ФотоШоу Про. Я думаю, вам будет интересно!