	ИНФОРМАЦИЯ, ДИЗАЙН, ПЕРЕВОДЫ, РЕКЛАМА . . .	w a p - с а й т
		Информационный портал

Сегодня:

admin@aranea.ru
+79068922256

aranea.ru || Спецификация CSS2 | 11.2. Отображение: свойство 'visibility'.

11.2. Отображение: свойство 'visibility'.

'visibility'
Тип значения:       visible | hidden | collapse | inherit
Начальная величина: inherit
Применяется:        ко всем элементам
Наследование:       нет
Процентная база:    нет 
Медиа:              визуальные

Свойство '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>

← Назад | Вперед →