Сменный фон страницы сайта

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Этот эффект относится, скорее всего, к разряду необязательных или второстепенных, но, как говорят, имеет место быть. Все-таки он немного придает разнообразия, вносит элемент новизны, заставляет посетителя обращать внимание на перемены.

Демо-пример Исходники (650 кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.

Скачайте учебный материал, распакуйте архив в текущую папку на компьютере. В папке randomfon находятся: папка img с изображениями фонов, файл стилей и индексный файл.

Откройте последний в вашем браузере и проверьте работу скрипта. Перезагрузите несколько раз страницу - фон должен меняться.

Подготовьте и поместите в папку img файлы изображений фонов. Можно оставить мои (светлые), кстати, они очень неплохие и подходят для светлой темы сайта. Если есть желание посмотреть и скачать фоны другого направления, найдите в Сети по поисковому запросу.

Файл стилей можно проигнорировать, так как он нужен только для демонстрации. Все свойства у Вас уже прописаны в вашем файле стилей.

А с индексного файла нам нужен участок кода со скриптом, который нужно расположить в раздел head вашей страницы:

<script type="text/javascript" language="javascript">
<!-- Random Background
function RandomBackground(images,btags)
{
/* si: start index 
** i: current index
** ei: end index
** cc: current count
*/
 si = 0; 
 ci=0;
 cc=0;
 imageSet = new Array();
 ei = images.length;
  for (i=1;i<ei;i++) {
    if (images.charAt(i) == ' ' || images.charAt(i) == ',') {
      imageSet[cc] = images.substring(si,i);
      cc++;
      si=i+1;
      }
    }
  ind = Math.floor(Math.random() *cc);
  document.writeln("<body "+btags+" background=\""+imageSet[ind]+"\">");
}

//function RandomBackground(images)
//{
  //RandomBackground(images,"");
//}

// End Script -->
</script>

А в раздел body из того же индексного файла вставляем такой кусочек кода:

<script type="text/javascript">
RandomBackground("img/1.jpg img/20.jpg img/7.jpg img/10.jpg img/19.jpg ");
</script>

Здесь нет ничего примечательного кроме вставки изображений, в дальнейшем определяющих рисунок фона вашего сайта.

          Путь к одному из изображений фона. Таких изображений может быть столько, сколько Вам угодно.

Вот и всё, что я хотел сказать об эффекте смены фона страницы. После установки скрипта, при каждой перезагрузке страницы, её фон будет меняться. А Вам лично желаю изменений (характера, поведения, взглядов на жизнь и т.д.) только в лучшую сторону! Ваш Л.М.


Ваше мнение по материалу, изложенному на сайте




  © 2015–2024  dynamic-site.olerant.ru  L.M. Служба поддержки Яндекс.Метрика