Кроме текста, в качестве ссылок можно использовать и рисунки. Изображение в
этом случае надо поместить между тегами <a>
и </a>, как показано в примере 1.
Пример 1. Создание рисунка-ссылки
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Ссылка</title>
</head>
<body>
<p><a href="sample.html"><img src="images/sample.gif" width="50"
height="50" alt="Пример"></a></p>
</body>
</html>Атрибут href тега <a>
задает путь к документу, на который указывает ссылка, а src
тега <img> — путь к графическому файлу.
Вокруг изображения-ссылки автоматически добавляется рамка толщиной один пиксел и цветом, совпадающим с цветом текстовых ссылок.
Чтобы убрать рамку, следует для тега <img> использовать
стилевое свойство border (пример 2).
Пример 2. Удаление рамки вокруг изображения
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Ссылка</title>
<style>
a img {
border: none; /* Убираем рамку */
}
</style>
</head>
<body>
<p><a href="sample.html"><img src="images/sample.gif" width="50"
height="50" alt="Пример"></a></p>
</body>
</html>