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

Как спрятать ссылку под картинку?

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

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

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

Html код для создания картинки ссылки

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

При помощи данного кода мы сможем выводить на нужно нам странице кликабельную картинку ссылку.

Подробный разбор html кода картинки ссылки

И так теперь давайте посмотрим подробно код ссылки картинки и разберем какие атрибуты за что отвечают.

Код картинки

  • Атрибут src — данный атрибут нужен для указания адреса картинки которую мы хотим вставить в страницу.
  • Атрибут alt — этот атрибут нужен для указания поисковым системам описания картинки.

Код ссылки

  • Атрибут href — данный атрибут указывает куда должен быть перенаправлен пользователь.
  • Атрибут target — в данном атрибуте можно прописать как указание браузеру как открыть страницу, в новом окне или в текущем.
  • Атрибут title — сюда можно вставить текст который будет показан пользователю при наведение курсора на картинку ссылку.
Читайте также:  Как убрать подчеркивание ссылки HTML and CSS

Пример картинки ссылки

Как сделать картинку ссылкой img ссылка?На основе кода, что я разместил выше, и что мы разбирали в течении этого урока, я вставил слева в эту страницу картинку ссылку, что бы вы смогли наглядно увидеть, как это будет выглядеть в итоге.

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

Надеюсь эта статья оказалась для вас полезной и помогла решить ваши проблемы. Удачи в ваших начинаниях и следите за обновлениями блога.

1 Star2 Stars3 Stars4 Stars5 Stars (5 голосов: 5,00 из 5)
Загрузка...

Подпишитесь и получайте новые статьи мгновенно на электронную почту

Похожие записи

  • jQuery якорь — делаем плавную прокруткуjQuery якорь — делаем плавную прокрутку [sc:AdSense] Доброго времени суток! Я как обычно рад вас видеть на страницах своего блога. Сегодня хотелось бы рассмотреть такую тему, как создание jQuery якоря, для плавной прокрутки, от ссылки до якоря на странице вашего […]
  • Увеличение посещаемости сайта: отчет по тестамУвеличение посещаемости сайта: отчет по тестам [sc:AdSense] Как обычно начинаю с приветствия, для меня сейчас утро, сколько времени у вас и когда вы это читаете я не в курсе, так что доброго времени суток! Хотел подвести итог нескольким тестам которые я проводил. Хотя […]
  • Оптимизация описания картинки — правильный AltОптимизация описания картинки — правильный Alt [sc:AdSense] Доброго времени суток, я как обычно рад вас приветствовать на страницах своего блога! Сегодня бы хотелось продолжить разговор о seo оптимизации, а точнее как правильно составить описание картинок на […]

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

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

Подтвердите, что Вы не бот — выберите человечка с поднятой рукой: