Разделы

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

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

По умолчанию цвет рамки вокруг изображений-ссылок совпадает с цветом текстовых ссылок. В стилях достаточно использовать атрибут border, добавляя его к конструкции A IMG, она сообщает, что рамку следует добавлять только к тегу <IMG>, когда он находится внутри тега <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=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="thumb1.jpg" alt="Фотография 1"></a>
   <a href="photo2.html"><img src="thumb2.jpg" alt="Фотография 2"></a>
  </p>
 </body>
</html>

Результат данного примера показан на рис. 1. Чтобы цвет рамки менялся при посещении ссылки, в примере используется псевдокласс visited.

Рис. 1

Рис. 1. Цвет рамки вокруг непосещенной и посещенной ссылки

Разделы

Термины

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

Отправить комментарий