Поиск

Видимость: свойство 'visibility'

'visibility'

Значение: visible | hidden | collapse | inherit
Начальное значение: inherit
Область применения: все элементы
Наследование: нет
Процентное задание: нет
Устройства: визуального форматирования

Свойство 'visibility' определяет, будет ли осуществляться отображение блоков, порождаемых элементом, или нет. Невидимые блоки по-прежнему влияют на отображение (для запрета генерации блоков свойству 'display' необходимо присвоить значение 'none'). Значения данного свойства имеют следующий смысл:

visible

Генерируемый блок является видимым.


hidden

Генерируемый блок является невидимым (полностью прозрачным), но по-прежнему влияет на отображение.

collapse

Обратитесь к разделу, посвященному динамическим преобразованиям строк и столбцов таблиц. Если это значение используются с элементами, отличными от строк или столбцов, то его действие аналогично действию значения 'hidden'.

Данное свойство можно использовать в сочетании со сценариями для создания динамических эффектов.

В следующем примере нажатие одной кнопки, расположенной в форме, активизирует заданный пользователем сценарий, вызывая тем самым появление одних блоков и исчезновение других. Т.к. эти блоки имеют одинаковый размер и местоположение, то создается эффект замены одного блока другим. (Код сценария написан на некоем гипотетическом языке программирования сценариев. Он может влиять или не влиять на агенты пользователей, поддерживающие CSS.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
#container1 { position: absolute;
top: 2in; left: 2in; width: 2in }
#container2 { position: absolute;
top: 2in; left: 2in; width: 2in;
visibility: hidden; }
-->
</STYLE>
</HEAD>
<BODY>
<P>Выберите подозреваемого:</P>
<DIV id="container1">
<IMG alt="Аль Капоне"
width="100" height="100"
src="suspect1.jpg">
<P>Имя: Аль Капоне</P>
<P>Место жительства: Чикаго</P>
</DIV>
<DIV id="container2">
<IMG alt="Лаки Лючано"
width="100" height="100"
src="suspect2.jpg">
<P>Имя: Лаки Лючано</P>
<P>Место жительства: Нью-Йорк</P>
</DIV>
<FORM method="post"
action="http://www.suspect.org/process-bums">
<P>
<INPUT name="Capone" type="button"
value="Capone"
onclick='show("container1");hide("container2")'>
<INPUT name="Luciano" type="button"
value="Luciano"
onclick='show("container2");hide("container1")'>
</FORM>
</BODY>
</HTML>