Рамка вокруг Имаги

www-html.ru

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

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

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

Валидный код
<!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 text="#00ff00">
<p><img src="sample.gif" width="200" height="222" border="2" alt="Рамка зеленого цвета толщиной 2 пиксела"></p>
</body>
</html>

Браузеры неодинаково отображают данный пример. Так, Файер фох и Опера покажет зеленую рамку, а Internet Эксплорер черную (рис. 1).

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

Рис. 1. Вид рамки вокруг рисунка в браузере Опера

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

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

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

Валидный код
<!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 (ЦСС)

Валидный код
<!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>
<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> и является, тем самым, ссылкой.

Аналогично, с помощью стилей можно и установить цвет рамки вокруг картинки. Для этого также используется атрибут 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=utf-8">
<title>Рамка и рисунок</title>
<style type="text/CSS (ЦСС)">
A IMG {
 border: 1px /* Толщина рамки */
 solid /* Сплошная рамка */
 red; /* Цвет рамки */
}
</style>
</head>
<body>
<p><a href="sample.ШТМЛ"><img src="sample.gif" width="50" height="50" alt=""></a></p>
</body>
</html>

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



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

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