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

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

Если перед вами возникла задача, как сделать картинку ссылкой и вы не можете с этим справится в рамках html, до давайте наиболее подробным образом попробуем разобраться с данной проблемой!

Вывод изображения

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

<img src="/адрес картинки" />

Конечно же вы можете указать многочисленные дополнительные атрибуты этого тега:

<img src="/адрес картинки" width="ширина картинки" height="высота картинки" alt="Альтернативный текст" title="Поясняющий текст к картинке" align="Выравнивание"/>, причем:

  • Адрес картинки (src) - полный путь до вашего графического файла;
  • Ширина картинки (width) - задается числовым значением, определяет ширину картинки в пикселях или в процентах от первоначального размера;
  • Высота картинки (height) - задается числовым значением, определяет высоту картинки в пикселях или в процентах от первоначального размера;
  • Альтернативный текст (alt) - показывается в случае, когда картинка не может быть загружена с сервера, показ картинок отключен в вашем браузере или по иным причинам, препятствующим выводу картинки в html;
  • Поясняющий текст к картинке (titlle) - текст, появляющийся при удержании на исходном изображении курсора мыши;
  • Выравнивание (align) - может принимать значения: right, center, left и указывающее положение картинки на экране или по отношению к какому-либо другому объекту.

Это не все атрибуты, которые могут быть применены к изображению, но самые основные.

Итак, следующая картинка, которую вы можете увидеть на экране вашего монитора, в html выглядит следующим образом:

Планета




<img src="/images/img/planetX.jpg" width="100px" height="100%" alt="Планета" title="Убери курсор с планеты" align="left"/>

Создание ссылки

Для того, чтобы на экране вывести ссылку, для этого необходимо воспользоваться тегом <a>:

<a href="/url" title="Поясняющий к ссылке текст" align="Выравнивание" target="Способ открытия ссылки">текст ссылки</a>

Тег <a> является парным, его необходимо закрывать. Обратите внимание, что атрибуты title и align имеют точно такой же смысл, что и тега <img>. Атрибут href должен указывать url (путь), на который мы должны перейти по ссылке, а атрибут target указывает открыть ссылку в текущем окне (значение target="_self") или в новом окне (значение target="_blank").

Следующая ссылка, которая представлена на экране монитора в html выглядит следующим образом:

Нажми меня

<a href="http://respondas.ru/" title="Я ссылко" target="_self" align="right">Нажми меня</a>

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

Соответственно, чтобы сделать картинку ссылкой, для этого необходимо объединить 2 описанных выше тега в следующую конструкцию:

<a href="/..."><img src="/..." /></a>

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

См, как выглядит наша ссылка-изображение, представленная чуть ниже в html:

<a href="http://respondas.ru/" target="_blank"><img src="/images/img/planetX.jpg" /></a>

P.S. Хотелось бы пояснить, что все описанное выше работает только в html и не будет работать на многочисленных форумах и социальных сетях, которые используют так называемые BB-Code и Wiki-разметку.