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

Чтобы картинка была ссылкой на сайт или веб-страницу, элемент <img> достаточно вставить внутрь ссылки <a> следующим образом.

<a href="https://webref.ru"><img src="image/shark.jpg" alt=""></a>

Здесь атрибут src определяет адрес картинки, а href — адрес сайта или веб-страницы, куда будет вести ссылка.

В примере 1 показано добавление нескольких изображений, каждое из них является ссылкой.

Пример 1. Изображения как ссылки

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображения-ссылки</title>
 </head>
 <body>
  <p>
   <a href="page/help.html"><img src="image/panda.png" alt="Панда"></a>
   <a href="page/help.html"><img src="image/fox.png" alt="Лиса"></a>
  </p>
 </body>
</html>

Результат данного примера показан на рис. 1. Обратите внимание, что изображения-ссылки ничем не отличаются от обычных картинок и чтобы понять, что перед нами ссылка, следует навести на картинку указатель или щёлкнуть по ней.

Изображения как ссылки

Рис. 1. Изображения как ссылки

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 18.09.2018
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid