Учебник. Каскадные таблицы стилей


Управление видимостью


   

Одним из наиболее интересных атрибутов CSS-P является атрибут visibility. Он позволяет "проявлять" или прятать информацию на HTML-странице.

Например, эта страница - набор кадров, которые можно перелистывать. Для этого просто нужно нажимать на слово "далее" в конце этой страницы.

Перелистывание реализовано как изменение атрибута visibility в JavaScript-функции:

function change()

{

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

window.document.layers[current].visibility="hidden";

window.document.layers[next].visibility="show";

current=next; }

Вызов функции при этом помещен в гипертекстовую ссылку со схемой URL "javascript":

<a href="javascript:change();void(0);">

далее...



</a>

На предыдущих фрагментах этой страницы мы обсудили программирование visibility, но ни словом не упомянули о том, как этот атрибут записывается в CSS. Здесь мы восполняем этот пробел и приводим описание невидимого раздела:

<div style="position:absolute;
top:230px;left:55px;width:550px;
visibility:hidden;">...</div>

При программировании атрибута visibility следует принимать в расчет тип браузера. Данная страница написана для Netscape Navigator. Только этот браузер поддерживает объект layer, который мы используем при программировании. В Microsoft Internet Explorer этот код работать не будет. Для IE нами разработана другая страница.


   

Одним из наиболее интересных атрибутов CSS-P является атрибут visibility. Он позволяет "проявлять" или прятать информацию на HTML-странице.

Например, эта страница - набор кадров, которые можно перелистывать. Для этого просто нужно нажимать на слово "далее" в конце этой страницы.

Перелистывание реализовано как изменение атрибута visibility в JavaScript-функции:

function change()

{

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

window.document.all.item("kuku",current).visibility="hidden";

window.document.all.item("kuku",next).visibility="visible";

current=next; }

Последовательность "kuku" - это значение атрибута id раздела.

Вызов функции при этом помещен в гипертекстовую ссылку со схемой URL "javascript":

<a href="javascript:change();void(0);">

далее...

</a>

На предыдущих фрагментах этой страницы мы обсудили программирование visibility, но ни словом не упомянули о том, как этот атрибут записывается в CSS. Здесь мы восполняем этот пробел и приводим описание невидимого раздела:

<div id=kuku style="position:absolute;
top:230px;left:55px;width:550px;
visibility:hidden;">...</div>

При программировании атрибута visibility следует принимать в расчет тип браузера. Данная страница написана для Microsoft Internet Explorer. Это следует и из программного кода, который поддерживает DHTML объектную модель документа и из использования атрибута id у раздела. Для Netscape Navigator нами разработана другая страница.



Содержание раздела