Смена картинки в зависимости от времени суток
|
|
[1] likbezz [07.05.2010, 06:33] |
Пример «Ротатора» фоновых картинок. 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>
☑ Прикрепления .... (пример использования)
P.S. Кому что непонятно - всё есть в исходнике ...
По теме: «Случайная фоновая картинка для «шапки» сайта на «информерах» (Смена фоновой картинки при обновлении страницы для uCoz ...)» «JS смены шапки»
|
|
[2] likbezz [10.05.2010, 03:57] |
Пример «Ротатора» картинок. v7. Смена картинки в зависимости от времени суток. Тоже самое, только «в профиль» ... ヅ Java Script: Quote (Java Script) <script type="text/javascript"> <!-- date = new Date(); a = date.getHours(); if (a > 7 && a < 21) { document.write('<img src="/_example/rotator/logo0.jpg" width="100%" border="0" />'); } else {document.write('<img src="/_example/rotator/logo1.jpg" width="100%" border="0" />');} //--> </script> <noscript> <img src="/_example/rotator/logo0.jpg" width="100%" border="0" /> </noscript> Опять же на «всякий» вот и HTML-код: Code <body> <script type="text/javascript"> <!-- date = new Date(); a = date.getHours(); if (a > 7 && a < 21) { document.write('<img src="/_example/rotator/logo0.jpg" width="100%" border="0" />'); } else {document.write('<img src="/_example/rotator/logo1.jpg" width="100%" border="0" />');} //--> </script> <noscript> <img src="/_example/rotator/logo0.jpg" width="100%" border="0" /> </noscript> </body> Всё тоже самое, что и в посте выше ... ☑ Пример ... (прикрепление ... ) Если нужно поменять картинку - «покрутите свои часы» ... (на компе ... снизу - справа ... ヅ) ... или - сохраните пример локально, и поиграйтесь с циферками «a > 7 && a < 21» .... Flesh
|
|
[3] likbezz [10.05.2010, 04:23] |
В теже тему ... Code <script type="text/javascript" <Script Language="JavaScript"> var links = new Array("<a href= ссылка ><img src= URL картинки border=none></a>","<a href= ссылка ><img src= URL картинки border=none></a>", и так далее); </Script> </head> <body> <Script Language="JavaScript"> var los = Math.floor(Math.random() * links.length) document.write (links[los]); </Script> Для ротации флешек, достаточно только изменить Quote <img src= URL картинки border=none> На Code <embed src="флеш.swf" width=500 height=100 quality=high type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"> Flesh |
|
[4] likbezz [03.03.2011, 04:12] |
Quote (ПИВЗ) Все бы было просто, но в моем шаблоне, шапка выставляется в СSS. И чего? - Вариантов - море ... Вариант №1 Стили (в шаблон) Code <style type="text/css"> /* StartStyle */ <?if($HOUR$>'0' and $HOUR$<'5')?> #city{background-image:url(/_theme/_st/img/header1.png);} <?else?> #city{background-image:url(/_theme/_st/img/header2.png);} <?endif?> /* EndStyle */ </style> Прописываем основные моменты шапки (ширина, высота, фон по умолчанию, прочее) в стилях, а в глоб блок выносим только стили для фона, через условия. Контекстные стили имеют более высокий приоритет. ... Вариант №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 задаём картинку “по умолчанию”, изменением класса, переопределяем стили. Прописывать ВСЕ возможные классы не обязательно - тогда будет отображаться картинка по умолчанию. ... Вариант №3 CSS Code #city{width:1120px;height:385px;background:url(/_theme/_st/img/header.png);margin:auto;} HTML Quote <div id="city" style="background-image:url(/_theme/_st/img/header$HOUR$.png);">Шапка</div> - То бишь - в стилях задаём все параметры, а контекстными стилями, переопределяем фоновую картинку. ... ... Достаточно? - могу ещё парочку, как минимум, придумать ... ))) ...
|
|
[5] likbezz [03.03.2011, 04:59] |
С помощью JQ HTML Code <script type="text/javascript">var bg='$HOUR$';</script> <div id="city">Шапка</div> Скрипт - можно во внешний файл: Code <script type="text/javascript"> $(function(){if(bg){$('#city').css('backgroundImage','url(/_example/bg/ext/nebo'+bg+'_bg.jpg)');};}); </script> Или вот так, если в исходный код: Code <script type="text/javascript"> $(function(){$('#city').css('backgroundImage','url(/_example/bg/ext/nebo$HOUR$_bg.jpg)');}); </script> - Должны иметь набор картинок: header0.png, header1.png, header2.png .... ...... Ещё вариант: HTML Code <div class="n$HOUR$" id="city">Шапка</div> Скрипт - можно (нужно) во внешний файл: Code <script type="text/javascript"> $(function(){var obj=$('#city'),img=obj.attr('class'); obj.css({backgroundImage:'url(/_example/bg/ext/nebo'+img+'_bg.jpg)'}); }); </script> - То же самое ... ... ... Через стили Подключаем нужный в зависимости от времени суток: Code <link type="text/css" rel="StyleSheet" href="/_st/<?if($HOUR$>'0' and $HOUR$<'5')?>bg-sun.css<?else?>bg-night.css<?endif?>" /> .... Подключаем нужный каждый час: Code <link type="text/css" rel="StyleSheet" href="/_st/bg-$HOUR$.css" /> - Во внешних файлах - ТОЛЬКО стили для фона. Стили для чётных/нечетных часов: Code <link type="text/css" rel="StyleSheet" href="/_st/<?if($HOUR$%2=1)?>bg-even.css<?else?>bg-odd.css<?endif?>" /> Меняем стили каждые три часа: - то бишь - для часов, кратным трём: Quote <link type="text/css" rel="StyleSheet" href="/_st/<?if('3'%3=0)?>bg-even.css<?endif?>" /> - В основную таблицу - прописываем фон по умолчанию, в дополнительную - ТОЛЬКО стили для дополнительного фона. ... |
|
[6] likbezz [03.08.2011, 17:51] |
Quote (Komoff) Не получается у меня нечего. sad Мне нужно чтобы с 6 до 22 часов таблица имела один фон, а соответственно с 22 до 6 часов другой. Фон задан в стилях, таблица имеет id. Самое простое было бы использовать $HOUR$, но он выводит время по часовому поясу заданному в настройках сайта, а мне нужно, чтобы время бралось с компьютера пользователя. Вот и не пойму как сменить стиль таблицы в зависимости от времени суток. |
|
[7] likbezz [03.08.2011, 17:58] |
Quote (likbezz) Фон задан в стилях, таблица имеет id Оч. хорошо ... значит мы знаем что такое 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. ...
Стили: Code <style type="text/css"> #header{background:url(картинка_по_умолчанию.png);} #header.mDay{background:url(картинка_для_дня.png);} #header.mNight{background:url(картинка_для_ночи.png);} </style>
Стили #header.mDay{} и #header.mNight{} - не обязательны, то бишь по желанию. Стили #header{} - по умолчанию, если JS отключён, например, или ошибка скрипта ... или ещё что ... Стили #header.mDay{} - для “дневной” шапки, стили #header.mNight{} - для “ночной”, соответственно. ...
Скрипт добавляется после (!!!) блока «header» ...
Время считается, относительно установленного на машине (компьютере) пользователя.
Скрин:
...
☑ Пример Скрипт смены шапки в зависимости от локального времении.... ... ...
|
|
[8] Komoff [03.08.2011, 20:03] |
likbezz, спасибо! Как всегда всё здорово! По-переводил время, всё работает.
Сообщение отредактировал Komoff - Среда, 03.08.2011, 23:26 |
|
[9] likbezz [03.08.2011, 21:04] |
Komoff, Quote (Komoff) т.к. он менял фон в 5 и 21 час Ты имел в виду «с 07 утра до 20.59» ... ) .... |
|
[10] Komoff [03.08.2011, 23:15] |
likbezz, ну конечно, это я невнимательно читал, ещё и перепутал.)) Все правильно с 7, как в твоем сообщении. Извиняюсь. Удалил то сообщение, чтобы в заблуждение не вводило никого.
Сообщение отредактировал Komoff - Среда, 03.08.2011, 23:28 |
|
[11] Гость [15.12.2011, 13:56] |
Здравствуйте понравился пример от 03.08.2011, 17:58, но я столкнулся с проблемой у меня хедер сделано таблицей 100% длинны разбитого на 3 столбца в котором разный ид с разной картинкой, как приплюсовать класс к каждому столбцу? |
|
[12] likbezz [15.12.2011, 23:44] |
Гость, Quote (Гость) как приплюсовать класс к каждому столбцу? Никак - класс давать таблице нужно. ... Кроме того, на ваш вопрос есть уже ответ. ... |
|
[13] Гость [10.01.2012, 07:33] |
здравствуйте. нужен похожий скрип, только для смены фона всей страницы. |
|
[14] likbezz [10.01.2012, 14:10] |
Гость, Quote (Гость) здравствуйте. нужен похожий скрип, только для смены фона всей страницы. Стили: Code <style type="text/css"> body{background:url(картинка_по_умолчанию.png);} body.mDay{background:url(картинка_для_дня.png);} body.mNight{background:url(картинка_для_ночи.png);} </style>
Скрипт: Code <script type="text/javascript"> var date=new Date(),h=date.getHours(),obj=document.getElementsByTagName('body')[0]; if(h>6&&h<21){obj.className+=' mDay';}else{obj.className+=' mNight';} </script> ... |
|
[15] Гость [20.03.2012, 04:08] |
Доброе время суток ув. знатоки срочно нужна ваша помощь мне нужен простой ротатор картинок в заданное время! Для сайта онлайн радио cms dle...Только чтоб не зависил от времени пк а от времени сервера сайта! Еще чтоб можно было задавать время с минутами т.е. мну нужно чтоб одна картинка появилась в 9.30 утра и стояла до 14.30 потом вторя картинка сменилась на третью в 16.30 и т. д.
Придумайте что нить что возможно! Заранее спасибо! |
|