Как изменить цвет рамки вокруг изображения-ссылки?

🕛 19.01.2009, 18:48

Рамка вокруг изображения появляется в том случае, когда к тегу <IMG> добавляется атрибут border с ненулевым значением и при создании изображения-ссылки. При этом тег <IMG> хранится внутри контейнера <A>. Независимо от ситуации цвет рамки устанавливается автоматически, однако через стили можно задать любой желаемый цвет границы.

По умолчанию цвет рамки вокруг изображений-ссылок совпадает с цветом текстовых ссылок. В стилях достаточно использовать атрибут border, добавляя его к конструкции A IMG, которая сообщает, что рамку следует отображать только у изображений, находящихся внутри контейнера

<A>

(пример 1).
Пример 1. Цвет рамки

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!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=windows-1251"> <title>Изображение-ссылка</title> <style type="text/css"> A IMG { border: 3px solid #c79316; /* Рамка вокруг ссылок */ } A:visited IMG { border: 3px solid #c716bd; /* Рамка вокруг посещенных ссылок */ } </style> </head> <body> <p> <a href="photo1.html"><img src="images/thumb1.jpg" alt="Фотография 1" width="120" height="120"></a> <a href="photo2.html"><img src="images/thumb2.jpg" alt="Фотография 2" width="120" height="120"></a> </p> </body>
</html>