Спецификация CSS2



              

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


'visibility'

Значение: visible | hidden | collapse | inherit

Начальное: inherit

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

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

visible

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

hidden

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

collapse

См. также раздел динамические эффекты рядов и столбцов в таблицах. Если используется не с рядами или столбцами, '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>Choose a suspect:</P> <DIV id="container1"> <IMG alt="Al Capone" width="100" height="100" src="suspect1.jpg"> <P>Name: Al Capone</P> <P>Residence: Chicago</P> </DIV>

<DIV id="container2"> <IMG alt="Lucky Luciano" width="100" height="100" src="suspect2.jpg"> <P>Name: Lucky Luciano</P> <P>Residence: New York</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>




Содержание  Назад  Вперед