Кроме текста, в качестве ссылок можно использовать и рисунки. Изображение в
этом случае надо поместить между тегами <a
href=...> и </a>, как показано в
примере 1.
Пример 1. Создание рисунка-ссылки |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<body>
<a
href="sample.html"><img src="sample.gif" width="50"
height="50"></a>
</body>
</html> |
Параметр href тега <A> задает путь к документу, на который указывает ссылка,
а src тега <IMG> — путь
к графическому файлу.
Вокруг изображения-ссылки автоматически добавляется рамка толщиной один
пиксел и цветом, совпадающим с цветом текстовых ссылок.
Чтобы убрать рамку, следует у тега <IMG> установить параметр border="0" (пример 2).
Пример 2. Удаление рамки вокруг изображения |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<body>
<a
href="sample.html"><img src="sample.gif" width="50" height="50" border="0"></a>
</body>
</html> |
Можно также воспользоваться CSS, чтобы убрать рамку для всех изображений,
которые являются ссылками. Для этого применяется стилевой параметр border cо значением none (пример
3).
Пример 3. Использование CSS |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<style
type="text/css">
A IMG { border: none
}
</style>
</head>
<body>
<a
href="sample.html"><img src="sample.gif" width="50"
height="50"></a>
</body>
</html> |
Конструкция A IMG определяет контекст применения
стилей — только для тега <IMG>, который находится
внутри контейнера <A>. Поэтому изображения в
дальнейшем можно использовать как обычно — с рамкой или без.