Динамическое изменение внешнего вида страницы
В результате мы получим картинку, постепенно увеличивающуюся в размерах. Кстати, некоторые компьютеры могут "не успевать" так часто перерисовывать изображение, особенно если на странице есть еще какая-нибудь информация, поэтому можно в расчете на них увеличить время задержки перед следующим вызовом функции. При этом лучше во столько же раз увеличить и приращение размеров картинки, иначе она будет расти чересчур медленно, и надоест пользователю еще до того, как приобретет свои истинные размеры. Например, это можно сделать так:
document.images[0] width += 10; document.images[0].height += 10; setTimeout("sizer()", 100);При этом, разумеется, увеличение будет происходить не так плавно, зато мы можем быть уверены, что на большинстве компьютеров такая “анимация” будет воспроизведена корректно.
Кстати, нашу функцию sizer() легко переделать так, чтобы картинка, достигнув нормальных размеров, снова начала уменьшаться, затем опять увеличилась и так далее. Для этого надо прибавлять к размерам не просто число, а переменную:
document.images[0].width += a; document.images[0].height += a;Тогда мы сможем присваивать этой переменной то положительное, то отрицательное значение, например, +2 и – 2. Пусть изначально значение будет положительным:
var a = 2;…причем это определение переменной не должно происходить внутри “тела” функции. Теперь, если картинка достигла нормальных размеров, изменим значение а на – 2:
if (document.images[0].width >= 451) a = -2;Картинка начнет уменьшаться. Осталось при слишком маленьком ее раз-мере снова изменить значение а:
if (document.images[0].width <= 151) a = 2;Посмотрим, как теперь будет выглядеть функция целиком (все остальное на этой странице остается таким же, как в предыдущем примере, поэтому мы не будем повторять текст всей страницы):
<SCRIPT LANGUAGE="JavaScript"> //<!-- var a = 2; function sizer() { if (document.images[0].width >= 451) a = -2; if (document.images[0].width <= 151) a = 2; document.images[0].width += a; document.images[0].height += a; setTimeout("sizer0", 20); } //--> </SCRIPT>Итак, мы рассмотрели, каким образом можно получить доступ из сценария к любой картинке на веб-странице. Таким же способом можно управлять еще некоторыми элементами: ссылками и элементами тега <AREA> через метод document.links, формами через метод document.forms и document.forms[номep_формы].elements, якорями через метод document.anchors и т.д.
Доступ к элементам HTML по имени
Однако, во-первых, не очень удобно высчитывать номер элемента на странице, а во-вторых, описанным выше способом мы можем получить доступ не ко всем элементам. Рассмотрим такой пример. Предположим, мы создаем веб-страницу для сайта фирмы, производящей мигалки, и поэтому нам обязательно хочется, чтобы в заголовке соответствующее слово мигало. Мы даже уже написали заготовку:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE>Мигающий заголовок</TITLE> <STYLE> BODY { background-color: #F9FFF9; color: #OD160E; } H2 { text-align: center; } P { text-indent: 3em; } </STYLE></HEAD> <BODY> <H2>Производство <BR>МИГАЛОК<BR> и цветомузыкальных установок </H2> <P>Наша фирма является уникальным явлением на всем земном шаре. Вы спросите, почему? Подождите немного, скоро вы это сами поймете, если вам удастся дочитать этот текст до конца. Если же вам не удастся это сделать, то когда-нибудь вы очень сильно пожалеете об этом, говоря себе: а вот было оно совсем рядом, а я упустил его... Это мы про что, как вы думаете?</P> <P>Итак, решено: вы, во что бы то ни стало, дочитываете этот текст до конца. (ДАЛЕЕ ИДЕТ КАКОЙ-НИБУДЬ ДЛИННЫЙ И СКУЧНЫЙ ТЕКСТ...)</P></BODY> </HTML>