На различных сайтах довольно часто можно встретить не только активные ссылки на другие сайты и страницы, но и картинки с активной ссылкой, при нажатии на которые также можно перейти на другие страницы. В этой статье мы как раз и рассмотрим, как сделать картинку ссылкой в html.
Картинка со ссылкой не так часто используется, что даже в различных движках сайтов нет отдельной функции для создания картинки со ссылкой. Но при этом код записи картинки со ссылкой в html настолько прост, что его в итоге можно записать и вручную.
Картинка со ссылкой составляется из двух частей кода, из активной ссылки и ссылки на картинку. Активная ссылка с использованием тега <a> записывается следующим образом:
<a href=»URL-адрес ссылки» >Название ссылки<a>
Атрибут <href> используется для указания ссылки на документ, на который будет производится переход.
Для вывода картинок на страницах сайта используется тег <img> а код для вывода картинки будет таким:
<img src=»Путь к картинке» >
Атрибут <src> используется для указания ссылки на картинку.
Теперь, чтобы сделать картинку ссылкой необходимо просто объединить два этих кода, записав код вывода картинки на сайт вместо названия ссылки в коде активной ссылки. Выглядит это следующим образом:
<a href=»URL-адрес ссылки» ><img src=»Путь к картинке» ><a>
К изображению может применяться еще множество других атрибутов, с помощью которых можно задать выравнивание картинки на странице, задать отступы и указать размер.
Также интересные статьи на сайте remontka.com :
Обзор интернет сервисов бесплатного хостинга
Как поменять пароль от своей базы MySQL в phpMyAdmin ?
Прозрачная картинка онлайн
Как сделать прозрачный фон у картинки онлайн ?
Если говорить о том, какие лучшие дистрибутивы Linux мы знаем, то этот список может быть…
Хотя Ubuntu и поставляется со встроенным обозревателем Firefox многие пользователи считают что это не самая…
Что такое Remmina? Remmina — это совершенно бесплатный и свободный клиент так называемого удаленного рабочего…
Как мы знаем, Ubuntu это самая популярная сборка из систем на базе ядра Linux. У…
Выбор ноутбука для каждого пользователя это довольно кропотливый процесс. Люди стараются подобрать ноутбук который будет…
Если вы решили ознакомиться с операционной системой Linux более детально и задались вопросом как установить…