Примеры скриптов
Ссылки, переливающиеся цветами радуги
В этом примере мы помещаем на страницу три гиперссылки. Чтобы привлечь внимание посетителей, мы заставляем их периодически изменять спой цвет. Мы не настаиваем на широком использовании этого способа дизайна (частое мигание не только привлекает, но и раздражает), но пример сам по себе довольно поучительный.
В НТМL-коде мы размешаем три гиперссылки на Web-странице нашего сайта, посвященного, главным образом, учебным примерам. Напомним его адрес: www.admiral.ru/~dunaev. Далее, в этом же HTML-документе мы размещаем скрипт (сценарий), который выполняет периодическую смену цветов гиперссылок.
В скрипте определяется массив, элементами которого являются коды или названия цветов. Напомним, что цвет можно задать двумя способами. В примере длина массива цветов (количество элементов) равна 8. Функция colorchange(), определение которой мы написали сами, изменяет цвет. Чтобы внести хаотичность в процесс выбора цвета, мы использовали оператор % для вычисления остатка от деления текущего индекса массива цветов на его длину. Таким способом мы вычисляем номер элемента массива цветов, который будем использовать при следующем назначении цвета ссылке. Разумеется, здесь можно придумать и что-нибудь более изысканное, но все и так достаточно хорошо работает.
Чтобы гиперссылки постоянно изменяли свой цвет, мы используем уже известный из предыдущих примеров метод setInterval(). Здесь он применяется к функции изменения цветов colorchange(). Это означает, что первым параметром метода является строка (в кавычках), содержащая вызов функции colorchange(). Частота смены цветов определяется вторым числовым параметром этого метода. Напомним, что он задает период запуска функции в миллисекундах, так что значение 500 соответствует 0.5 с. Обратите внимание, что способы выбора цветов для непосещенных и уже использованных ссылок различаются.
<HTML><!-- Ссылки--><A HREF="i_is.htm">Начало</A><A HREF="examples.htm">Примеры HTML</A><A HREF="mybook.htm">Мои книги</A><SCRIPT> colors = new Array(8); // массив цветов colors[1] = '#008000'; colors[2] = 'green'; colors[3] = '#c6c6bc'; colors[4] = 'green'; colors[5] = 'blue'; colors[6] = 'purple'; colors[7] = 'black'; colors[8] = 'red'; link = 4; // начальные индексы массива цветов function colorchange() { // изменение цвета link = (link + 1) % colors.length; vlink = (link + 1) % colors.length; document.linkColor = colors[link]; document.viinkColor = colors[vlink]; } setlnterval("colorchange()", 500); // изменение цвета через 500мс, т. е. через 0.5с. </SCRIPT> </HTML>Обратим внимание на то, что в данном примере в гиперссылках использовались имена файлов, а не их полные URL-адреса. Это вполне допустимо, если указанные файлы находятся в той же папке (каталоге), что и HTML-документ, содержащий эти гиперссылки. Для надежности, а также в общем случае, вы можете использовать более точные указания и, в частности, универсальные адреса расположения ресурсов – URL.