Полезные фишки        12 января 2015        124         0

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

Приветствую всех читателей моего блога!

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

Ещё не забывайте о том, что каждая картинка, должна быть правильно оптимизирована. И об этом, можете прочитать тут (там же есть подробный видео урок) и узнать о том, как делается раскрутка картинками.

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

Сделать картинку ссылкой html очень просто. Сама картинка, которую нужно сделать ссылкой, состоит из 2 частей:

  1. Изображения, которое Вы загрузили на страницу сайта.
  2. Ссылка на страницу сайта, куда пользователи будут переходить при клике на это изображение.

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

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

Пошагово это выглядит так:

Загружаете на сайт картинку, копируете её полный адрес (папку, в которой она находится) и вставляете в предназначенное для адреса место кода, который я дал выше. А в начало этого кода, вставляете адрес ссылки, куда при клике по картинке, будут перемещаться пользователи.

Теперь, предлагаю пример кликабельного изображения. Нажмите на него!

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

Нажми на картинку и скачай 7 Подарков!

Вот html код этого изображения:

<a href=»http://nuzhnaya-infa.ru/skachat-besplatnye-obuchayushhie-knigi-besplatnye-elektronnye-knigi/»><img title=»Как сделать картинку ссылкой» alt=»Как сделать картинку ссылкой» src=»http://nuzhnaya-infa.ru/wp-content/uploads/2015/01/kak-sdelat-kartinku-ssylkoj.jpg» width=»288″ height=»216″ /></a> Нажми на картинку и скачай 7 Подарков!

Что обозначает каждый отрезок кода:

a href=»http://nuzhnaya-infa.ru/skachat-besplatnye-obuchayushhie-knigi-besplatnye-elektronnye-knigi/ это адрес ссылки, на которую будут переходить пользователи, после клика по картинке.

<img title=»Как сделать картинку ссылкой» alt=»Как сделать картинку ссылкой» src= это Прописанные: Заголовок и Описание изображения.

«http://nuzhnaya-infa.ru/wp-content/uploads/2015/01/kak-sdelat-kartinku-ssylkoj.jpg» width=»288″ height=»216″ это адрес картинки на моём сайте (папка, название литиницей и размеры).

</a> Нажми на картинку и скачай 7 Подарков! это описание, которое Вы можете видеть под картинкой.

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

Сделать картинку ссылкой на wordrese, да и на всех остальных ssms просто. Как обычно загружаете картинку в статью. Дальше заходите в редактирование изображения и там в графе «Ссылка», прописывается адрес изображения, вставляя в это поле, ссылку на любую страницу своего или другого сайта.

На скриншоте я показал куда вставлять ссылку. Удаляете её прежний адрес и вместо него вставляете ссылку.

Пример

После этого сохраняете изменения, обновляете страницу с картинкой и при нажатии на неё курсором мышки, Вы переместитесь на ту страницу сайта, ссылку на которую указали.

Вот и всё! надеюсь, что эта статья помогла Вам найти ответ на вопрос, как сделать картинку со ссылкой. Удачи!В качестве примера, предлагаю картинку, нажав на которую, Вы переместитесь на другую страницу моего сайта.

В завершении статьи, узнайте, как определить движок сайта и как сделать кнопку Купить.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *