Разделы

Рамка вокруг изображений

Метки:

Изображение, добавляемое на веб-страницу, можно поместить в рамку различной ширины. Для этого служит параметр border тега <IMG>. По умолчанию рамка вокруг изображения не отображается за исключением случая, когда рисунок является ссылкой. Цвет рамки при этом совпадает с цветом текста, заданным с помощью стиля или параметра text тега <BODY> (пример 1).

Пример 1. Добавление рамки вокруг изображения

<!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=windows-1251">
  <title>Рамка</title>
  <style type="text/css">
   BODY {
    color: #0f0; /* Зеленый цвет текста */ 
   }
  </style>
 </head>
 <body>
  <p><img src="sample.gif" width="150" height="50" border="2" 
     alt="Рамка зеленого цвета толщиной 2 пиксела"></p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1

Рис. 1. Вид рамки в браузере Opera

Если изображение является ссылкой, рамка добавляется автоматически, толщина ее составляет один пиксел, а цвет рамки совпадает с цветом ссылок, как показано на рис. 2.

Рис. 2

Рис. 2. Рамка вокруг изображения

Чтобы убрать рамку, следует задать параметр border="0" у тега <IMG> (пример 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=windows-1251">
  <title>Изображение в качестве ссылки</title>
 </head>
 <body>
  <p><a href="sample.html"><img src="sample.gif" width="150" 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=windows-1251">
  <title>Изображение в качестве ссылки</title>
  <style type="text/css">
   A IMG { 
    border: none; /* Убираем рамку вокруг изображений-ссылок */
   }
  </style>
 </head>
 <body>
  <p><a href="sample.html"><img src="sample.gif" width="50" height="50" 
      alt="Рисунок-ссылка"></a></p>
 </body>
</html>

Конструкция A IMG определяет контекст применения стилей — только для тега <IMG>, который находится внутри контейнера <A> и является, тем самым, ссылкой.

Аналогично, с помощью стилей можно и установить цвет рамки вокруг картинки. Для этого также используется стилевой атрибут border, но в качестве его значения выступает толщина границы, ее стиль и цвет (пример 4).

Пример 4. Изменение цвета рамки с помощью стилей

<!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: 1px solid red; /* Параметры рамки */
   }
  </style>
 </head>
 <body>
  <p><a href="sample.html"><img src="sample.gif" width="50" height="50" 
     alt="Рисунок-ссылка"></a></p>
 </body>
</html>

В данном примере вокруг изображения-ссылки добавляется граница красного цвета толщиной один пиксел.

HiFiT, 21.01.2010

А как сделать, чтобы края рамки были в виде пунктира?
---
http://mashkovtsev.ru-мой сайт, куда я хочу применить этот код.

Андрей, 16.10.2010

Спасибо... Очень помогло... Хотя вроде и справочников много, но так детально мало описаний...

Разделы

Термины

Рамка вокруг изображений

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