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

www-html.ru

Обычная версия

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

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

Валидный HTML
<!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.ШТМЛ"><img src="sample.gif" width="50" height="50" alt="Пример"></a></p>
</body>
</html>

Параметр href тега <A> задает путь к файлу, на который указывает ссылка, а src тега <IMG> — путь к графическому файлу.

Вокруг Имаги-ссылки автоматически добавляется рамка толщиной один пиксел и цветом, совпадающим с цветом контентовых ссылок.

Чтобы убрать рамку, следует у тега <IMG> установить параметр border="0" (пример 2).

Пример 2. Удаление рамки вокруг Имаги

Валидный HTML
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ссылка</title>
</head>
<body>
<p><a href="sample.ШТМЛ"><img src="sample.gif" width="50" height="50" border="0" alt="Пример"></a></p>
</body>
</html>

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

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

Валидный HTML
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.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.ШТМЛ"><img src="sample.gif" width="50" height="50" alt="Пример"></a></p>
</body>
</html>

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



Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект