Динамическое изменение внешнего вида страницы
Результат работы этой заготовки показан на рис. 6.6. Итак, проблема в том, чтобы заставить мигать слово "МИГАЛОК". Ну, разумеется, можно применить стилевое свойство text-decoration: blink; или просто тег <BLINK>, но ни то, ни другое не поддерживается браузером Internet Explorer. Как же быть?
Прежде всего, надо выделить слово МИГАЛОК в отдельный элемент. Поскольку оно находится на отдельной строке, можно использовать тег <DIV>:
<H2>Производство <DIV>МИГАЛОК</DIV> и цветомузыкальных установок.</H2>Чтобы иметь возможность управлять этим элементом, нужно дать ему уникальное имя, установив атрибут ID=:
<H2>Производство <DIV ID="mig">МИГАЛОК</DIV> и цветомузыкальных установок.</H2>Теперь, если у пользователя браузер Netscape, можно сразу установит! мигающий стиль:
<H2>Производство <DIV ID="mig" STYLE="text-decoration: blink;>МИГАЛОК</DIV> и цветомузыкальных установок.</H2>
Рис. 6.6. Предварительная заготовка для веб-страницы с мигающим заголовком
Изменение свойств элементов
Поскольку Internet Explorer при этом не отобразит мигание, мы можем написать функцию, которая будет делать этот элемент то видимым, то невидимым. Для этого нам пригодится стилевое свойство visibility. Сначала установим его так, чтобы элемент был виден:
<H2>Производство <DIV ID="mig" STYLE="text-decoration: blink; visibility: visible;">МИГАЛОК</DIV> и цветомузыкальных установок.</H2>После этого остается проверить тип браузера, и если это не Netscape, вызвать функцию искусственного мигания (которую мы еще не написали):
if (navigator.appName != "Netscape") blink it();Обратите внимание на то, что символ != означает неравно. Итак, эта функция должна то прятать наш элемент, то наоборот, показывать. Чтобы сделать элемент невидимым, нужно присвоить его свойству visibility значение hidden. Поскольку мы дали элементу уникальное имя (с помощью атрибута ID=), теперь у нас есть возможность получить доступ к нему через коллекцию document.all:
document.all.mig.style.visibility = "hidden";Как видите, написав метод document.all, можно после точки просто указать имя элемента и далее любой атрибут, в данном случае STYLE=. После style можно снова поставить точку и указать любое стилевое свойство.
Чтобы сделать наше слово опять видимым, нужно присвоить свойству visibility значение visible:
document.all.mig.style.visibility = "visible";Теперь осталось только написать условие. Можно было бы просто написать:
if (document.all.mig.style.visibility = "hidden") document.all.mig.style.visibility = "visible"; else document.all.mig.style.visibility = "hidden";Однако давайте для большей гибкости и наглядности используем переменную флаг. Пусть она будет равна 1, если элемент видимый, и 0, если нет. Тогда мы можем в условии проверять именно этот флаг. Вся функция приобретет такой вид:
<SCRIPT LANGUAGE="JavaScript"> //<!-- var vis = 0; function blink it() { if (vis = 1) { document.all.mig.style.visibility = "hidden"; vis = 0; } else { document.all.mig.style.visibility = "visible"; vis = 1; } setTimeout("blink_it()", 400); } //--> </SCRIPT>