Задавались ли вы вопросом о том, как сделать картинки на вашем сайте кликабельными? В большинстве случаев, это подразумевает под собой 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>
Результат в браузере:
В целом, кликабельное изображение состоит из двух частей:
- Само изображение, которое можно создать посредством нескольких методов (которые мы также опишем на этой странице).
- Ссылка на страницу, на которую люди будут перенаправлены при клике по изображению.
Давайте рассмотрим очень простой способ создания картинки-ссылки. Это изображение, которое переместит вас на страницу, на которой представлено изображение. В этом примере вы будете перемещены на одну из страниц.
Предлагаю вам код для создания изображения:
|
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]
