Здравствуйте, уважаемые читатели этого блога. Вы наверняка не раз замечали в интернете картинки, на которые можно было кликнуть и перейти таким образом на какую-нибудь страницу. А как это реализовывается изнутри? Как сделать в html ссылку картинку? Очень просто.
Ссылка картинка в html
Тут нужно поступить очень просто. Тег вставки изображения – img. Он одинарный. Тег ссылки – a. Он парный. Соответственно, нужно всего лишь в парный тег ссылки вставить img. И вот как это будет примерно выглядеть:
<a href = “url-адрес”><img src = “путь к изображению”></a>
Итак, всего лишь два тега и два обязательных атрибута – адрес, по которому осуществиться переход при клике, и адрес непосредственно изображения. Остальные атрибуты, вроде стилевых классов или открытия ссылки в новом окне можно прописать по желанию.
Но это не единственный способ сделать в html ссылку картинку. Есть еще один, при котором не нужно вставлять изображение непосредственно в html-код.
Способ номер 2
<a href = “url-адрес”></a>
Тут мы не вставили никакой картинки в код. Так как же мы ее получим? Через css и добавление фона к ссылке. Но для начала нужно превратить ссылку в блочный элемент и задать ей такие размеры, как картинке, которая будет выступать в качестве ее фонового изображения. Следующий код предполагает, что картинка имеет разрешение 200 на 200 пикселей.
A{
Display: block;
Width: 200px;
Height: 200px;
Background: url(путь к изображению) no-repeat;
}
Тут мы прописали четкие размеры элемента, потом задали картинку-фон и попросили браузер не повторять ее. Это будет абсолютно такая же ссылка-картинка, как и в предыдущем варианте, за исключением того, что она будет иметь блочные свойства.
Какой способ выбрать
Это зависит от целей. Например, графические элементы – кнопки социальных сетей, графические навигационные кнопки и так далее лучше оформлять вторым способом, так как тогда поисковик не будет считать эти изображения частью контента страницы и ее семантичность может улучшиться.
Картинки в контентной части, конечно, наоборот нужно вставлять с помощью тега img, ведь ему можно задать еще и атрибут альтернативного текста, а это чуть-чуть улучшит ревелантность текста.