Пример «Ротатора» фоновых картинок. v6. Смена фона в зависимости от времени суток.
Расписывать - особого желания нет, всё и так понятно ...
Вот код:
Quote (Java Script)
<script type="text/javascript"> <!-- function change(img) {document.write('<div style=\"width:95%;height:200px;\"background:'+img+'\">');} var h=(new Date()).getHours(); if (h > 23 || h <7) change('url(\/_example\/rotator\/psBg.gif);'); if (h > 6 && h < 12) change('url(\/_example\/rotator\/psBg-e.gif);'); if (h > 11 && h < 19) change('url(\/_example\/rotator\/psBg-g.gif);'); if (h > 18 && h < 24) change('url(\/_example\/rotator\/psBg-r.gif);'); //--> </script> <noscript> <div style="width:95%;height:200px;background:url(/_example/rotator/psBg.gif);">Здесь располагается содержимое нового тега Div</div> </noscript>
На вский ... вот и HTML-код:
Quote (HTML)
<body> <script type="text/javascript"> <!-- function change(img) {document.write('<div style=\"width:95%;height:200px;\"background:'+img+'\">');} var h=(new Date()).getHours(); if (h > 23 || h <7) change('url(\/_example\/rotator\/psBg.gif);'); if (h > 6 && h < 12) change('url(\/_example\/rotator\/psBg-e.gif);'); if (h > 11 && h < 19) change('url(\/_example\/rotator\/psBg-g.gif);'); if (h > 18 && h < 24) change('url(\/_example\/rotator\/psBg-r.gif);'); //--> </script> <noscript> <div style="width:95%;height:200px;background:url(/_example/rotator/psBg.gif);">Здесь располагается содержимое нового тега Div</div> </noscript>Здесь располагается содержимое нового тега Div <script type="text/javascript"> document.write('</div>'); </script> </body>
Короче, можно так, а модно в отдельный файл ... в абсолютными ссылками на картинки ... И подключаете его в то место, где должна оттображаться картинка ... Примерно вот так:
Code
<script type="text/javascript" src="/путь до файла/картинка.js"></script>
Если нужно поменять картинку - «покрутите свои часы» ... (на компе ... снизу - справа ... ヅ) ... или - сохраните пример локально, и поиграйтесь с циферками «a > 7 && a < 21» ....
Прописываем основные моменты шапки (ширина, высота, фон по умолчанию, прочее) в стилях, а в глоб блок выносим только стили для фона, через условия. Контекстные стили имеют более высокий приоритет. ...
Вариант №2 CSS - (в таблицу CSS)
Code
<style type="text/css"> /* StartStyle */ #city{background-image:url(/_theme/_st/img/header.png);} #city.time1{background-image:url(/_theme/_st/img/header1.png);} #city.time2{background-image:url(/_theme/_st/img/header2.png);} #city.time3{background-image:url(/_theme/_st/img/header3.png);} /*И так далее ........*/ /* EndStyle */ </style>
Html
Quote
<div id="city" class="time$HOUR$">Шапка</div>
- То бишь - через ID задаём картинку “по умолчанию”, изменением класса, переопределяем стили. Прописывать ВСЕ возможные классы не обязательно - тогда будет отображаться картинка по умолчанию. ...
Не получается у меня нечего. sad Мне нужно чтобы с 6 до 22 часов таблица имела один фон, а соответственно с 22 до 6 часов другой. Фон задан в стилях, таблица имеет id. Самое простое было бы использовать $HOUR$, но он выводит время по часовому поясу заданному в настройках сайта, а мне нужно, чтобы время бралось с компьютера пользователя. Вот и не пойму как сменить стиль таблицы в зависимости от времени суток.
Оч. хорошо ... значит мы знаем что такое ID и как прописать фон ... ) ...
Всё вместе: (скрипт и html)
Code
<div id="header">Здесь располагается содержимое id "header"</div> <script type="text/javascript"> var date=new Date(),h=date.getHours(),obj=document.getElementById('header'); if(h>6&&h<21){obj.className+=' mDay';}else{obj.className+=' mNight';} </script>
Где: <div id="header" /> - блок с твоей шапкой. Остальное скрипт. Устанавливает блоку класс: с 07 утра до 20.59 == mDay после == mNight. ...
Стили #header.mDay{} и #header.mNight{} - не обязательны, то бишь по желанию. Стили #header{} - по умолчанию, если JS отключён, например, или ошибка скрипта ... или ещё что ... Стили #header.mDay{} - для “дневной” шапки, стили #header.mNight{} - для “ночной”, соответственно. ...
Скрипт добавляется после (!!!) блока «header» ...
Время считается, относительно установленного на машине(компьютере)пользователя.
likbezz, ну конечно, это я невнимательно читал, ещё и перепутал.)) Все правильно с 7, как в твоем сообщении. Извиняюсь. Удалил то сообщение, чтобы в заблуждение не вводило никого.
Сообщение отредактировал Komoff - Среда, 03.08.2011, 23:28
2011-12-15Дата: Четверг, 15.12.2011, 13:56 | Сообщение # 11
Группа: Гости
Здравствуйте понравился пример от 03.08.2011, 17:58, но я столкнулся с проблемой у меня хедер сделано таблицей 100% длинны разбитого на 3 столбца в котором разный ид с разной картинкой, как приплюсовать класс к каждому столбцу?
2012-03-20Дата: Вторник, 20.03.2012, 04:08 | Сообщение # 15
Группа: Гости
Доброе время суток ув. знатоки срочно нужна ваша помощь мне нужен простой ротатор картинок в заданное время! Для сайта онлайн радио cms dle...Только чтоб не зависил от времени пк а от времени сервера сайта! Еще чтоб можно было задавать время с минутами т.е. мну нужно чтоб одна картинка появилась в 9.30 утра и стояла до 14.30 потом вторя картинка сменилась на третью в 16.30 и т. д.
Придумайте что нить что возможно! Заранее спасибо!