Изображения в качестве ссылок
- 29 марта 2014
Изображение по умолчанию является строчно-блочным элементом и может быть использовано как содержимое гиперссылки.
Чтобы сделать картинку ссылкой, достаточно вложить его в тег a
:
<!-- HTML. Вставляем картинку в ссылку --> <a href="document.html"> <img src="image.jpg" alt="Изображение-ссылка" /> </a>
В приведенном примере при клике на изображение в этом же окне откроется document.html
Если нужно, чтобы при клике открылось полноразмерное фото в новом окне, нужно в качестве цели указать адрес этого фото и добавить атрибут target
.
<!-- HTML. Большое фото в новом окне. --> <a href="images/full-size-foto.jpg" target="_blank" title="в новом окне"> <img src="images/small-foto.jpg alt="Большое фото" /> </a>
На практике, ссылку содержащую изображение, часто помещают в контейнер, и уже его используют для позиционирования и оформления.