Nickolay.info. JavaScript. Динамический фон сайта как средство общения с пользователем :) |
В наше время сайты, как правило, имеют стилевой файл, определяющий единое форматирование элементов HTML. Иногда приходит в голову мысль, а не использовать ли сменяющийся фон с какими-то картинками или надписями для привлечения внимания пользователя к важным событиям? Ведь сменой одной строки кода мы достигнем того, что посетитель абсолютно любой страницы портала сразу же увидит на нём главное :)
Приём я попробовал на паре сайтов, и, поскольку так никто уже не делает, раздраженных комментов было немного, так что можно сделать вывод, что опыт удался :)
Разумеется, рисунок фона должен быть таким, чтоб текст на нём можно было прочитать. Вообще, в отношении фоновых рисунков я советую придерживаться умеренности и соблюдать следующие проверенные опытом правила:
Узнать больше можно, купив мою книгу об HTML и CSS (издательство "BHV").
Теперь посмотрим, какие есть варианты для быстрой смены фона.
Добавить в стилевой файл сайта следующее указание:
body { background-image: url(img/back.jpg); background-repeat: repeat; }
Разумеется, если стиль для тега body уже существует, можно просто вписать в тег этого стиля инструкции background-image и background-repeat. Здесь предполагается, что рисунок фона называется back.jpg и находится в папке img, расположенной на один уровень ниже файла стиля.
Добавить в каждый нужный файл HTML (для статического сайта) или в шаблон верхней части страницы сайта следующий скрипт на JavaScript:
<script type="text/javascript"> var dates=new Array ( //события д.б. упорядочены по дате; каждая пара пара чисел обозначает день и месяц, //третий параметр - обозначение события, можно использовать где-нибудь для вывода текстовой строки 1,1,'Новый год', 7,1,'Рождество', 14,2,'День влюблённых', 23,2,'День защитника Отечества', 8,3,'Международный женский день', 1,4,'Праздник юмора!', 1,5,'Праздник Первомая', 9,5,'День Победы', 12,6,'День независимости', 1,9,'День знаний и начало учебного года', 31,12,'C наступающим Новым годом!' ); var mondays= new Array (31,28,31,30,31,30,31,31,30,31,30,31); var today=new Date(); var day0=today.getDate(); var day=(day0<10 ? '0' : '') + day0; var mon0=today.getMonth()+1; var mon=(mon0<10 ? '0' : '') + mon0; var year=today.getFullYear(); var dow = ''; var down = today.getDay(); if (down == 0) { dow = 'Вс'; } else if (down == 1) { dow = 'Пн'; } else if (down == 2) { dow = 'Вт'; } else if (down == 3) { dow = 'Ср'; } else if (down == 4) { dow = 'Чт'; } else if (down == 5) { dow = 'Пт'; } else if (down == 6) { dow = 'Сб'; } function LeapYear (year) { mondays[1]=( (year%4==0) && (year%100!=0) || (year%400==0) ? 29 : 28); } LeapYear(year); function DateFound (d,m) { var di,mi,i; for (i=0; i<dates.length; i+=3) { di=dates[i]; mi=dates[i+1]; if ((d==di) && (m==mi)) { document.getElementById('back1').style.backgroundImage = 'url('+'img/'+day+mon+'.jpg'+')'; return i; } } return -1; } function DisplayDate() { var i=DateFound(day0,mon0); if (i>-1) { //Здесь можно поменять вывод и оформление события или же убрать этот вывод document.writeln ('<center><font size=1 color=red>'); document.write(dow + ', ' + day + '.' + mon + '.' + year+': '+dates[i+2]); document.writeln ('</font></center>'); } } </script>
При этом идентификатор тега <body> определен как
<body id="back1">
а скрипт вызыван из любого места документа тегом вида
<script type="text/javascript"> DisplayDate(); </script>
Естественно, тело скрипта можно разместить в отдельном файле с именем вроде dynamic_back.js и сослаться на него тегом вида
<script type="text/javascript" src="dynamic_back.js"></script>
Скрипт в работе: новое окно
Здесь предполагается, что набор рисунков, имена которых кодируют нужные даты (например, 0105 - рисунок для 1 мая), также находится во вложенной папке img и все рисунки имеют расширение .jpg.
От предыдущего вариант отличается лишь тем, что дата получается с сервера при формировании страницы, а затем, в зависимости от даты, ставится нужный фон. Если предположить, что рисунки, имена которых кодируют нужные числа и номера месяцев, хранятся так же, как в предыдущем пункте, то получаем следующий код на PHP (вставленнном внутрь тега <body>):
<body style="background-image: url(img/<? print get_ddmm(); ?>.jpg); background-repeat: repeat;">
Функция на PHP get_ddmm() просто получает текущую дату в виде ДДММ и имеет следующий вид:
<? function get_ddmm () { list($d,$m) = explode(',',date("d,m",time())); return $d.$m; } ?>
гостевая; E-mail |