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

kartinka

 

 

 

Как вставить в картинку ссылку на посторонний ресурс. Описание того, как сделать картинку ссылкой не только на блоге, но и в соц. сети ВКонтакте

Всем привет! Сегодня решил немного изменить своему стилю написания и попробовать сделать статью под ключевые запросы. Кто знает, а вдруг мне понравится. Так что если готовы смотреть скриншоты и читать, то поехали. А для любителей смотреть, в конце есть видео.

В этой статье Вы узнаете:

[—ATOC—]
[—TAG:h2—]

Как выглядит ссылка

Для начала, давайте разберемся как вообще выглядит ссылка на картинку. То есть ее параметры. Вот они:

Параметры картинки:

src  указывает на размещение изображения.
alt указывает на то, что изображено на изображении (показывается когда не загрузилась картинка)
title всплывающая подсказка
width ширина нашего изображения
height высота нашего изображения

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

Теперь нам нужно в эту конструкцию, дописать нашу ссылку. Для этого нужно проделать следующее:

  • Выбрать картинку.
  • vstavkaНажать на картинку, а потом на значок ссылки.
  • vstavka2После этого у Вас откроется вот такое окошко.
  • vstavka3Здесь Вам надо просто удалить URLкоторый был и выбрать из своего списка статей, статью на которую хотите дать ссылку. Когда выбрали,  просто кликните на нее и нажмите Добавить ссылку. Все ссылка добавлена.
  • Теперь нажимаем вкладку Текст и смотрим что получилось.

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

vstavka6Вот такие не сложные действия.

Кнопка ссылка

Теперь перейдем ко второму пункту нашей программы. Например надо сделать красивую кнопку и вставить ее в текст, там где Вам это нужно. Описывать все действия думаю смысла нет, так как они аналогичны первому.

Screenshot_232 Screenshot_234

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

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

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

Сегодня я например смотрел стенку одного из своих друзей — и увидел такую замечательную штуку, что нажимая на картинку (хотел посмотреть на картинку) — а меня перебросило на сайт. Вот штука! Я решил разобраться с этим делом и научиться размещать такие картинки на своей стенке вКонтакте. Пример такой ссылки с картинкой на скриншоте.

000014Такие картинки используются для рекламы сайта. Для того, чтобы разместить такую картинку с наложенной ссылкой, необходимо первым делом в своей публикации назместить картинку с пропорциями вроде 4*3. Именно тогда социальная сеть вКонтакте будет налаживать ссылку именно на картинку. Хочу отметить, вот такая вот манипуляция проходит с картинками более 500 пикселей в ширину. Вот кстати и моя картинка ссылка.

000342 Если же размер изображения будет слишком маленьким, то вК выведет картинку рядом с ссылкой. Пример такого блока ниже на скриншоте.

000343И так, обычно картинки добавляются тегом IMG. Для этого в исходном коде нашей публикации необходимо добавить код вида:

000017В публикации вид картинки без ссылки имеет примерно такой вид, и при клике на изображение ничего не происходит, так как ссылку мы еще не добавляли.

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

Но бывает такое дело, что нам необходимо, чтобы при нажатии на картинку происходил переход на другой сайт. Для этого мы буде выполнять следующие манипуляции.

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

Берем нашу картинку, которая выводится в теге IMG и одеваем её в тег A. Это выглядит примерно так. Хочу отметить, что содержимое тега А у нас удаляется, вместо него мы вписываем тег нашей картинки. По этому принципу работает большинство баннеров. И вот, если нажать на ссылку социальной сети ВКонтакте, и у нас на страничке есть картинка большого размера — то сайт вКонтакте выведет как раз нашу картинку с тегом А — другими словами при нажатии на картинку будет открыт наш сайт. Вид будет иметь такой:

000345Бывает такое, что мы себе просматриваем какие-то приколы в вКонтакте, или на каких-то блогах, и нам вдруг понравилась какая-то картинка. Как же получить на нее прямую ссылку? Делается это очень просто.

  • Для этого надо просто нажать правой кнопкой мышки и выбрать в контекстном меню пункт «Копировать ссылку на изображение.»
  • Scr_20Таким образом, мы получаем ссылку на картинку с сайта вКонтакте или с любого блога или сайта в интернете. Далее эту картинку мы можем использовать на свое усмотрение, например разместить на своем блоге описанными выше способами.  Прошу любить и жаловать и нажимать по социальным кнопкам социальных сетей — и проверить описанные методы размещения картинки с ссылкой. Надеюсь я все сделал верно?

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

А для любителей видео, я записал небольшой ролик. Приятного просмотра.

Автор блога Андрей Косолапов.

Комментируйте, делитесь с друзьями и подписывайтесь на новые статьи.

Подпишись и не пропусти нового и интересного.

Проснулась Катя  в 5 утра, вся в цветах…..!!!!! Боже какая романтика! Огляделась, твою мать… клумба)))) 

Подписка на новые статьи здесь. Просто нажми. 

11940_1000

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

  • Галина говорит:

    Здорово! у меня как раз сейчас такой вопрос стоит — картинку ссылкой сделать, так что ты вовремя статью написал, Андрей!

    • andrey говорит:

      Галя привет! Это я ее вовремя восстановил а не написал. Написана она была давно, только с этими переездами то появлялась, то пропадала. Ну теперь все, больше я никуда переезжать не собираюсь. Так что думаю статья должна висеть постоянно.

  • Эх, помнится мне, как я искал информацию об этом. Причем еще что-то в первый раз не получалось. Я тогда подписку на сайт делал, нажимаешь на картинку и попадаешь на страницу подписки. В итоге этой картинки уже нет, не понравилось. Зато теперь знаю как это сделать.

    • andrey говорит:

      Да, все мы когда то делали все первый раз. Злились когда не получалось. Зато теперь профи и можем даже обучать.

  • Привет Андрей. Ну что я тебе скажу…пусть эта статья побыстрей выйдет в топ 3, так как она на первый взгляд неплохо оптимизирована.

    Ты вот описал как вставить ссылку в картинку на wordpress и я не совсем понял, зачем нужно копировать новый код и вставлять в статью. Разве нельзя проделать такую же операцию как ты описал про кнопку?

    • andrey говорит:

       Привет! Игорь, этой статье 100 лет в обед, посмотри на дату первого коммента. Просто я в нее добавил видео и переделал дату публикации. На счет ссылки, по моему ты немного перепутал. Я описывал не только ссылку в статью, но и вставку в виджет. 

    • andrey говорит:

      Таисия, рад что статья оказалась полезной. Думаю у Вас все получится.

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

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

Поиск по блогу
People group
Рубрики блога
Курсы Евгения Попова

Контекстная реклама, за сатошики при чем платит реально

Подписная страничка за 5 минут

Подписка на обновления

Подписка на новые статьи здесь. Просто нажми. 

11940_1000
Группы Субскрайба

Хочу Всё Знать. Полезные Советы

Мой Ютуб
Старые записи