Главная » 2015 » Октябрь » 26 » Как сделать картинку ссылкой? установка ссылки на картинку
22:48
Как сделать картинку ссылкой? установка ссылки на картинку

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

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


Как сделать картинку ссылкой? Сделать это совсем не сложно, а в этой статье мы рассмотрим несколько важных тегов, которые помогут вам не только вмонтировать ссылку в картинку, но и настроить несколько дополнительных параметров.

Установка ссылки на картинку

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

Для начала устанавливаем любое изображение в новый материал:

картинка ссылкой

Код добавленного изображения  <img src="путь/название картинки.jpeg">. Теперь, чтобы добавить к изображению ссылку, нажимаем на значок цепочки и указываем некоторые параметры:

Теперь код изменился, и получилось:

<a href="workion.ru" target="_blank" title="ПРИМЕР ДЛЯ ВОРКИОН"><img src=" путь/название картинки.jpeg" /></a>

Возможно, вы не разбираетесь в HTML, поэтому разберем составляющие кода по отдельности:

a href="workion.ru"/a - эта часть отвечает за установку ссылки на картинку. target="_blank" – это указывает на то, что ссылка будет открыта в новом окне, если вы хотите, чтобы ссылка открывалась в той же вкладке, потребуется установить значение target="_self". title="ПРИМЕР ДЛЯ ВОРКИОН" – здесь содержится надпись, которая будет представляться при наведении курсора на изображение.

Последняя часть кода указывает на путь изображения. Если вам не нужны никакие настройки, и вы просто хотите поставить ссылку на картинку, то используйте следующую форму кода:

<a href="Ссылка"><img src="URL картинки"></a>

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

Просмотров: 315 |
Всего комментариев: 0
avatar