Управління видимістю

Одним з найбільш цікавих атрибутів CSS-P є visibility. Він дозволяє "проявляти" або ховати інформацію на HTML-сторінці.

Наприклад, сторінка містить набір кадрів, які можна гортати. Для цього просто потрібно натискати на слово "далі" в кінці сторінки.

Перегортання реалізовано як зміна атрибуту visibility в JavaScript-функції:

function change ()

   {next= current +1; if (next> 1) next = 0;

   window.document. all.item ("list",

          current). visibility = "hidden";

   window.document.all.item ("list",

       next). visibility = "visible";

   current = next;}

Послідовність "list" - це значення атрибуту ID розділу.

Виклик функції при цьому поміщений в гіпертекстове посилання зі схемою URL "javascript":

<A HREF="javascript:change();void(0);">

далі ...

</ A>

На прикладі попередніх фрагментів сторінки ми розглянули програмування visibility, але ні словом не згадали про те, як даний атрибут записується в CSS. Тут ми заповнюємо цей пробіл і наводимо опис невидимого розділу:

<DIV ID=test STYLE="position:absolute;

top:230px;left:55px;width:550px;

visibility:hidden;"> ...</ DIV>

При програмуванні атрибуту visibility слід приймати до уваги тип браузера. Дана сторінка написана для Microsoft Internet Explorer. Це випливає і з програмного коду, який підтримує об'єктну модель документа DHTML, і з використання атрибуту ID в розділу.

Порядок накладення і область видимості

Абсолютне і відносне позиціонування блоків дозволяє надати сторінці третій вимір. Координати блоку, а точніше, лівого верхнього кута прямокутника блоку, і його лінійні розміри визначають місце блоку на площині. Оскільки блок не є абстрактною точкою, прямокутники блоків перекриваються. Причому в певному порядку, що дозволяє говорити про їх розміщення в просторі. Порядок накладення (перекриття) блоків визначається атрибутом z-index.

Взагалі, при позиціонуванні блоків та їх накладенні один на одного виникають видимі і невидимі області блоків. CSS дозволяє керувати видимістю прямокутної частини блоку. За це в специфікації CSS-P відповідає атрибут clip.

Порядок накладення блоків. Z-index

Якщо бути більш точним, то блоки - це прямокутні картки, які лежать на поверхні, перекриваючи один одного. Відстань між ними поставити не можна, тобто повноцінного третього виміру немає:

Рис. 12.12. Порядок накладення блоків. z-index

Порядок перекриття блоків визначається атрибутом z-index. Чим більше значення z-index, тим ближче до спостерігача знаходиться шар:

Рис. 12.13. Порядок накладення блоків. z-index

Як ми бачимо, z-index може приймати і негативні значення.

При роботі з цим атрибутом слід мати на увазі, що Netscape Navigator і Internet Explorer застосовують різні моделі опису "шарування". У Internet Explorer це просто числовий параметр, який закріплений за блоком і не впливає на значення даного параметра у інших блоків. У Netscape Navigator зміна параметра z-index одного блоку впливає на значення цього параметра в інших блоків. Вони, немов картки на столі, перекладаються і отримують нові номери.

Картки перекриваються. Якщо натиснути на гіпертекстове посилання "Перекласти", то блакитна картка поповзе вниз і при зворотному ході її положення щодо червоної картки зміниться.

Рис. 12.14. Порядок накладення блоків. z-index

Рис. 12.15. Порядок накладення блоків. z-index