Как сделать картинку ссылкой?
Чтобы картинка была ссылкой на сайт или веб-страницу, элемент <img> достаточно вставить внутрь ссылки <a> следующим образом.
<a href="https://webref.ru"><img src="image/shark.jpg" alt=""></a>
Здесь атрибут src определяет адрес картинки, а href — адрес сайта или веб-страницы, куда будет вести ссылка.
В примере 1 показано добавление нескольких изображений, каждое из них является ссылкой.
Пример 1. Изображения как ссылки
Код примера скопирован в буфер
<!DOCTYPE html> <html lang="ru"> <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. Изображения как ссылки
См. также
- <a>
- <img>
- <picture>
- text-decoration-skip-ink
- Атрибуты ссылок
- Атрибуты элементов
- Выравнивание картинок
- Добавление медиа-контента
- Изображения
- Изображения
- Изображения в Bootstrap 5
- Изображения в HTML
- Использование :hover
- Краткая история изображений
- Масштабирование картинок
- Наследование в CSS
- Подрисуночная подпись
- Создание ссылок
- Ссылки
- Ссылки
- Ссылки в HTML
- Фон в CSS
- Форматы графических файлов
- Якоря