MyTetra Share
Делитесь знаниями!
Изображение в качестве ссылки
16.02.2019
15:46
Автор: alensav
Текстовые метки: Изображение, ссылка, httm, html
Раздел: MyTetra - INTERNET

Изображение в качестве ссылки



комментариев: 34

23.09.2010

Влад Мержевич

Кроме текста, в качестве ссылок можно использовать и рисунки. Изображение в этом случае надо поместить между тегами <a> и </a>, как показано в примере 1.

Пример 1. Создание рисунка-ссылки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; 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="0" (пример 2).

Пример 2. Удаление рамки вокруг изображения

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Ссылка</title>

</head>

<body>

<p><a href="sample.html"><img src="images/sample.gif" width="50"

height="50" border="0" alt="Пример"></a></p>

</body>

</html>



Можно также воспользоваться CSS, чтобы убрать рамку для всех изображений, которые являются ссылками. Для этого применяется стилевое свойство border cо значением none (пример 3).

Пример 3. Использование CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Ссылка</title>

<style type="text/css">

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>



Конструкция A IMG определяет контекст применения стилей — только для тега <img>, который находится внутри контейнера <a>. Поэтому изображения в дальнейшем можно использовать как обычно.

Так же в этом разделе: