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

кликабельная картинка ссылкаПривет, начинающие вебмастера.

В этой статье информация, как вставить ссылку в картинку, зачем это делать.

В некоторых случаях необходимо прикрепить ссылку к картинке. Люди любят нажимать на изображения, поэтому партнерская ссылка в виде картинки будет уместна в теле статьи, анонса. Она улучшит юзабилити.

Иногда их применяют как пункты меню, но это нежелательно, поскольку не удобно поисковым системам.

Ссылка в виде картинки в сайдбаре (баннер) – это общепринятый способ для перехода на нужный адрес: на страницу захвата, на другой веб-ресурс (счетчики).

Картинка со ссылкой – обязательный атрибут продающих страниц.

Каждый переходил по линкам, спрятанным под кнопкой КУПИТЬ (кликабельная картинка).

Разберем несколько вариантов, как сделать картинку (изображение) ссылкой.

Как в картинку вставить ссылку

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

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

Адрес ссылки – это адрес страницы, куда переходит пользователь, чаще всего страница подписки или лендинг партнерской программы.

Где взять адрес картинки? Изображение не должно находиться на вашем компьютере. Его размещают в интернете (в папке с медиафайлами на блоге, в корневой папке, на облачном сервисе, например, на Яндекс Диске). То есть изображение должно иметь свой адрес с http://.

<a href="адрес ссылки"><img src=" http://kartinka.jpg " alt="Как сделать картинку ссылкой" /></a>

Если изображение находится в одной папке с файлом index.html, тогда можете написать коротко

<a href="адрес ссылки"><img src=" kartinka.jpg " alt="Как сделать картинку ссылкой" /></a>

Если хотите, чтобы нужная страница открывалась в новом окне, конструкцию усложним, добавим target="_blank"

<a href="адрес ссылки" target="_blank"><img src=" kartinka.jpg " alt="Как сделать картинку ссылкой" /></a>

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

Cms WordPress имеет встроенный редактор, поэтому в картинку вставить ссылку просто. К примеру, вы написали статью, загрузили картинку в папку с медиафайлами.

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

ВСТАВЬТЕ картинку в запись,

ПРАВОЙ кнопкой мыши выделите картинку,

НАЖМИТЕ знак ссылки в меню WordPress,

УКАЖИТЕ урл в появившемся окне. Это может быть партнерская ссылка, или адрес другой страницы вашего блога, или ссылка на вашу страницу захвата,

ПОСТАВЬТЕ галочку ОТКРЫВАТЬ В НОВОМ ОКНЕ.

Не забудьте нажать СОХРАНИТЬ или ОПУБЛИКОВАТЬ, или ОБНОВИТЬ.

Посмотрите, как выглядит наша картинка в режиме просмотра html. Она также имеет:

  • атрибут alt (альтернативный текст);
  • высоту и ширину (height, width можно изменять в просмотре html или редактировать в папке с медиафайлами);
  • стиль alignleft (расположение слева).

как в картинку вставить ссылку

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

Чтобы сделать кликабельное изображение в сайдбаре (баннер), картинку поместите:

  • В ПАПКУ с медиафайлами блога Вордпресс.

Тогда конструкция будет такая

<p align="center"><a href="
http://адрес_ссылки" target="_blank"><img src="
http://ваш_сайт.ru/images/kartinka.jpg"></a></p>

Причем, адрес картинки ищите в папке с медиафайлами.

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

  • В КОРНЕВУЮ ПАПКУ сайта public_html (через ftp клиент)
<p align="center"><a href="
http://адрес_ссылки" target="_blank"><img src="
http://ваш_сайт.ru/kartinka.jpg"></a></p>

ЗАЖМИТЕ левой клавишей мыши виджет HTML (в ранних версиях Вордпресс виджет ТЕКСТ) и перетащите его в сайдбар.

ОТКРОЙТЕ виджет, нажав на треугольник справа.

ВСТАВЬТЕ в поле виджета первой или второй html код (зависит от места нахождения картинки).

С помощью средств css можно сделать рамку изображения, поменять фон, закруглить углы.

виджет Текст
как изображение сделать ссылкой
Затем нажмите СОХРАНИТЬ и перейдите на сайт, чтобы проверить результат.

Заключение

Привлекательные баннеры в сайдбаре, кликабельные картинки в теле поста — хороший способ размещения партнерских ссылок. Посмотрите, как картинку сделать ссылкой Вконтакте.

Для профессионального использования лучше Фотошоп. Вот самый понятный курс для начинающих.

Понравилась статья? Поделиться с друзьями:
Я новичок
Комментариев: 11
  1. Владимир (34)

    Вы,как всегда, на высоте. Все просто и доступно (в картинках).Спасибо!

  2. Алексей

    Добрый день! Ссылку в картинку вставили, спасибо. Подскажите как сделать эту картинку с ссылкой на странице активной, что бы она при на ведении курсора как то менялась, шевелилась, немного увеличивалась и т.п. на самом деле все ровно. За ранее спасибо.

    1. Ольга (автор)

      Алексей, почитайте вот эту статью http : //goldserfer.ru/plavnoe-uvelichenie-miniatyury-zapisi-pri-navedenii-kursora/.

  3. Татьяна

    Здравствуйте!Очень хорошо пояснили,показали,рассказали.Только,чтобы закончить вставлять картинку в сайтбар,приходится уходить с вашего сайта.Нереально код переписать от руки с вашего сайта! Скопировать вы не даете,появляется ссылка на ваш блог.Прийдется искать дальше,а жаль…

    1. Ольга (автор)

      Любую ссылку можно удалить при желании.

  4. Лия Сорока

    Спасибо большое, просветили! Хотела сама догадаться, но чтобы время не терять, обратилась к помощи интернет-сообщества! Надеюсь и в следующий раз найти у вас полезную информацию!

  5. Александр

    Отличный мануал! Много шлака пришлось перечитать, пока не нашёл эту статью. Реально помогла, спасибо!

  6. bulawerty

    Хорошая статья, вопрос к автору Вы видео урок не думали сделать?

    1. Ольга (автор)

      Скриншота вполне достаточно.

  7. Андрей Зимин

    Благодарю за подсказку, отличный способ сделать из изображения ссылочку!

  8. Андрей Зимин

    Спасибо, ваш метод мне помог, форма и фон отлично вписались в дизайн блога!

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: