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


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


Пример 1. Добавление рамки вокруг изображения
<html>
<body text=#00FF00>

<img src="sample.gif" width=50 height=50 border=2> рамка зеленого цвета толщиной 2 пиксела
</body>
</html>

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

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

Пример 2. Удаление рамки вокруг изображения
<a href="sample.html"><img src="sample.gif" width=50 height=50 border=0></a>

Можно, также, использовать CSS, чтобы убрать рамку для всех изображений, которые являются ссылками. Для этого применяется параметр border cо значением none (пример 3).

Пример 3. Использование CSS
<style>
A IMG { border: none }
</style>

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

В браузере Netscape 4.x приведенный способ работать не будет, поскольку он не поддерживает свойство border: none. Для него можно применить следующую хитрость - цвет рамки установить такой же, как и у фона веб-страницы. Рамка в этом случае видна не будет, сливаясь с фоном (пример 4).

Пример 4. Цвет рамки с помощью стилей
<style>
A IMG { border: none; border-color: #FFFFFF; }
</style>

В примере цвет рамки установлен белым.
Приведенным способом можно устанавливать рамку изображения любого цвета, получая тем самым интересные эффекты. Только надо убрать предварительно border: none.


Предыдущая статья     Следующая статья     Список статей