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

0
12146

Задавались ли вы вопросом о том, как сделать картинки на вашем сайте кликабельными? В большинстве случаев, это подразумевает под собой HTML, и с помощью данной статьи вы научитесь делать так, чтобы на изображения на вашем блоге, сайте или странице можно было кликать на картинку.

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

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

Используем HTML для того, чтобы сделать изображение кликабельным

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

<img src="адрес картинки">

Для того чтобы создать ссылку используется тег <a>. Таким вот образом:

<a href="адрес ссылки" >Название ссылки, если необходимо</a>

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

<a href="адрес ссылки" ><img src="адрес картинки" ></a>

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

Адреса можно прописывать как в полном формате: http:// и т.д

Так и в короткой форме, например: kartinka.jpg. Этот вариант доступен, если рисунок у вас лежит в той же папке, что и html файл.

Пример

Код html:

<a href="http://web-lesson.ru"><img src="link_img.png"></a>

Результат в браузере:

alt

В целом, кликабельное изображение состоит из двух частей:

  1. Само изображение, которое можно создать посредством нескольких методов (которые мы также опишем на этой странице).
  2. Ссылка на страницу, на которую люди будут перенаправлены при клике по изображению.

Давайте рассмотрим очень простой способ создания картинки-ссылки. Это изображение, которое переместит вас на страницу, на которой представлено изображение. В этом примере вы будете перемещены на одну из страниц.

как сделать картинку ссылку

Предлагаю вам код для создания изображения:

1
2
<p style="text-align:center"><a href="http://web-profy.com"><img src="http://web-profy.com/wp-content/uploads/2012/11/click-me.jpg" />
Сделать картинку ссылкой</a></p>

 

Код состоит из форматирования изображения и текста, их центрирования, а также из строки текста; ссылка на страницу, на которую я хочу переместить людей, а также исходный код изображения. То есть:

<p style=»text-align:center«> — выравнивает изображение по центру страницы,  для выравнивания по левой стороне «center» заменяем на «left», а для правой заменяем на «right»

<a href=«http://web-profy.com»> ссылка на которую будет направлен пользователь кликнувший по картинке, в примере домен этого блога, вы можете его заменить на любой другой адрес.

<img src=«http://web-profy.com/wp-content/uploads/2012/11/click-me.jpg» /> Здесь указан путь к изображению, то есть где оно располагается, в вашем случае впишите туда адрес к нужному изображению.

[embedyt] https://www.youtube.com/watch?v=ywZAN0rm0zQ[/embedyt]

[embedyt] https://www.youtube.com/watch?v=5rIfkOomRhg[/embedyt]

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here