регистрация
856материалов
3324комментария
235тем на форуме
6997пользователей

Смена фона сайта на Cookie для uCoz


Описание скрипта:

Всем привет, сегодня хочу поделиться с Вами интересным скриптом для Вашего сайта в системе uCoz "cмена фона сайта на Cookie", суть скрипта заключается в том, что с помощью не большого кода, Вы сможете дать пользователям приятную функцию смена фона сайта. Скрипт построен на куках, то есть выбор фона будет запоминаться и когда пользователь будет заходить на Ваш сайт снова и снова, то у него будет выбранное им изображение. В решение используется 9 фонов, но можно сделать и больше. Скрипт очень легок в установке и не займет много времени. Ну что поехали!?

Установка скрипта:

В нижнюю часть сайта или на всех страницах перед </body> вставляете код:
Код
<script type="text/javascript">              
function okno(){              
_uWnd.alert($("#okno1").html(),'Смена фона',{name:'24a', align:'left', w:415, h:395, tm:400000, icon:'http://s5.ucoz.net/img/icon/tip.png'})              
};              
function plat1(){              
setCookie('platbg1','1','365'); eraseCookie('platbg2');eraseCookie('platbg3');eraseCookie('platbg4');eraseCookie('platbg5');eraseCookie('platbg6'); eraseCookie('platbg7'); eraseCookie('platbg8'); eraseCookie('platbg9');              
$('body').css('background-image', 'url("http://webmaster-ucoz.ru/ucoz/img/fons/fon_1.jpg")');              
};              
function plat2(){              
setCookie('platbg2','1','365'); eraseCookie( 'platbg1' );eraseCookie( 'platbg3' );eraseCookie( 'platbg4' );eraseCookie( 'platbg5' );eraseCookie( 'platbg6' ); eraseCookie('platbg7'); eraseCookie('platbg8'); eraseCookie('platbg9');              
$('body').css('background-image', 'url("http://webmaster-ucoz.ru/ucoz/img/fons/fon_2.jpg")');              
};              
function plat3(){              
setCookie('platbg3','1','365'); eraseCookie( 'platbg1' );eraseCookie( 'platbg2' );eraseCookie( 'platbg4' );eraseCookie( 'platbg5' );eraseCookie( 'platbg6' ); eraseCookie('platbg7'); eraseCookie('platbg8'); eraseCookie('platbg9');              
$('body').css('background-image', 'url("http://webmaster-ucoz.ru/ucoz/img/fons/fon_3.jpg")');              
};              
function plat4(){              
setCookie('platbg4','1','365'); eraseCookie( 'platbg1' );eraseCookie( 'platbg2' );eraseCookie( 'platbg3' );eraseCookie( 'platbg5' );eraseCookie( 'platbg6' ); eraseCookie('platbg7'); eraseCookie('platbg8'); eraseCookie('platbg9');              
$('body').css('background-image', 'url("http://webmaster-ucoz.ru/ucoz/img/fons/fon_4.jpg")');              
};              
function plat5(){              
setCookie('platbg5','1','365'); eraseCookie( 'platbg1' );eraseCookie( 'platbg2' );eraseCookie( 'platbg3' );eraseCookie( 'platbg4' );eraseCookie( 'platbg6' ); eraseCookie('platbg7'); eraseCookie('platbg8'); eraseCookie('platbg9');              
$('body').css('background-image', 'url("http://webmaster-ucoz.ru/ucoz/img/fons/fon_5.jpg")');              
};              
function plat6(){              
setCookie('platbg6','1','365'); eraseCookie( 'platbg1' );eraseCookie( 'platbg2' );eraseCookie( 'platbg3' );eraseCookie( 'platbg4' );eraseCookie( 'platbg5' ); eraseCookie('platbg7'); eraseCookie('platbg8'); eraseCookie('platbg9');              
$('body').css('background-image', 'url("http://webmaster-ucoz.ru/ucoz/img/fons/fon_6.jpg")');              
};              
function plat7(){              
setCookie('platbg7','1','365'); eraseCookie( 'platbg1' );eraseCookie( 'platbg3' );eraseCookie( 'platbg4' );eraseCookie( 'platbg5' );eraseCookie( 'platbg6' ); eraseCookie('platbg2'); eraseCookie('platbg8'); eraseCookie('platbg9');              
$('body').css('background-image', 'url("http://webmaster-ucoz.ru/ucoz/img/fons/fon_7.jpg")');              
};              
function plat8(){              
setCookie('platbg8','1','365'); eraseCookie( 'platbg1' );eraseCookie( 'platbg3' );eraseCookie( 'platbg4' );eraseCookie( 'platbg5' );eraseCookie( 'platbg6' ); eraseCookie('platbg2'); eraseCookie('platbg7'); eraseCookie('platbg9');              
$('body').css('background-image', 'url("http://webmaster-ucoz.ru/ucoz/img/fons/fon_8.jpg")');              
};              
function plat9(){              
setCookie('platbg9','1','365'); eraseCookie( 'platbg1' );eraseCookie( 'platbg3' );eraseCookie( 'platbg4' );eraseCookie( 'platbg5' );eraseCookie( 'platbg6' ); eraseCookie('platbg7'); eraseCookie('platbg8'); eraseCookie('platbg2');              
$('body').css('background-image', 'url("http://webmaster-ucoz.ru/ucoz/img/fons/fon_9.jpg")');              
};              
</script>              
<script src="http://webmaster-ucoz.ru/ucoz/img/fons/cookies.js"></script>              
<script>              
if(getCookie('platbg1')) {              
$('body').css('background-image', 'url("http://webmaster-ucoz.ru/ucoz/img/fons/fon_1.jpg")');              
};              
if(getCookie( 'platbg2' )) {              
$('body').css('background-image', 'url("http://webmaster-ucoz.ru/ucoz/img/fons/fon_2.jpg")');              
};              
if(getCookie( 'platbg3' )) {              
$('body').css('background-image', 'url("http://webmaster-ucoz.ru/ucoz/img/fons/fon_3.jpg")');              
};              
if(getCookie( 'platbg4' )) {              
$('body').css('background-image', 'url("http://webmaster-ucoz.ru/ucoz/img/fons/fon_4.jpg")');              
};              
if(getCookie( 'platbg5' )) {              
$('body').css('background-image', 'url("http://webmaster-ucoz.ru/ucoz/img/fons/fon_5.jpg")');              
};              
if(getCookie( 'platbg6' )) {              
$('body').css('background-image', 'url("http://webmaster-ucoz.ru/ucoz/img/fons/fon_6.jpg")');              
};              
if(getCookie( 'platbg7' )) {              
$('body').css('background-image', 'url("http://webmaster-ucoz.ru/ucoz/img/fons/fon_7.jpg")');              
};              
if(getCookie( 'platbg8' )) {              
$('body').css('background-image', 'url("http://webmaster-ucoz.ru/ucoz/img/fons/fon_8.jpg")');              
};              
if(getCookie( 'platbg9' )) {              
$('body').css('background-image', 'url("http://webmaster-ucoz.ru/ucoz/img/fons/fon_9.jpg")');              
};              
</script>              
<div style="display:none;" id="okno1">              
<img onclick="plat1()" src="http://webmaster-ucoz.ru/ucoz/img/fons/fon_1.jpg" width="130px" height="120px">              
<img onclick="plat2()" src="http://webmaster-ucoz.ru/ucoz/img/fons/fon_2.jpg" width="130px" height="120px">              
<img onclick="plat3()" src="http://webmaster-ucoz.ru/ucoz/img/fons/fon_3.jpg" width="130px" height="120px">              
<img onclick="plat4()" src="http://webmaster-ucoz.ru/ucoz/img/fons/fon_4.jpg" width="130px" height="120px">              
<img onclick="plat5()" src="http://webmaster-ucoz.ru/ucoz/img/fons/fon_5.jpg" width="130px" height="120px">              
<img onclick="plat6()" src="http://webmaster-ucoz.ru/ucoz/img/fons/fon_6.jpg" width="130px" height="120px">              
<img onclick="plat7()" src="http://webmaster-ucoz.ru/ucoz/img/fons/fon_7.jpg" width="130px" height="120px">              
<img onclick="plat8()" src="http://webmaster-ucoz.ru/ucoz/img/fons/fon_8.jpg" width="130px" height="120px">              
<img onclick="plat9()" src="http://webmaster-ucoz.ru/ucoz/img/fons/fon_9.jpg" width="130px" height="120px">              
</div>

В верхнюю часть перед </head> вставляете код:
Код
<style>
.smena_fona, .smena_fona:hover{text-transform:uppercase;font-weight:bold;color:#0080DD;border:2px solid #0080DD;text-decoration:none;display:inline-block;padding:4px 12px;margin-right:12px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.smena_fona:hover{background:#0080DD;color:#FFF;}
</style>

Где хотите видеть кнопку вызова окна вставляете код:
Код
<a class="smena_fona" href="javascript://" onclick="okno();">Сменить фон сайта</a>

Настройки скрипта:

Как я уже писал выше, в скрипте используются 9 деревянных фонов, которые вы легко можете изменить на свои.
В каждом разделе используется одно и тоже фоновое изображение, на пример возьмем 1: http://webmaster-ucoz.ru/ucoz/img/fons/fon_1.jpg, для того чтобы его изменить надо в кодах:

здесь:
Код
setCookie('platbg1','1','365');
eraseCookie('platbg2');eraseCookie('platbg3');eraseCookie('platbg4');eraseCookie('platbg5');eraseCookie('platbg6');
eraseCookie('platbg7'); eraseCookie('platbg8'); eraseCookie('platbg9');
$('body').css('background-image', 'url("ссылка на картинку")');
};

здесь:
Код
if(getCookie('platbg1')) {              
$('body').css('background-image', 'url("ссылка на картинку")');
};

и здесь:
Код
<img onclick="plat1()" src="ссылка на картинку" width="130px" height="120px">
указать ссылку на одно и тоже изображение. Так делаем со всем фонами.

Если у Вас будет криво отображаться окно вызова, то в коде находим кусок:
Код
function okno(){              
_uWnd.alert($("#okno1").html(),'Смена фона',{name:'24a', align:'left', w:415, h:395, tm:400000, icon:'http://s5.ucoz.net/img/icon/tip.png'})              
};
И с помощью двух кодов w:415, h:395 подстраиваем под свои ajax.

На это все, будут вопросы, задавайте их в комментариях!


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 26.08.2015 в 21:00
Материал просмотрен: 2168 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 7 комментариев

Пожаловаться
Сказать спасибо

6 комментариев


Oksana
Оксана @Oksana 26.08.2015 20:431
+12
А что, не плохо, все ясно и понятно! Спасибо за материал, может в будущем пригодится
A
Анонимно 27.08.2015 03:252
+9
Полностью с табой согласна!
Рагозин Валера 05.09.2015 18:153
+5
Огромный плюс у этого скрипта, моментальная подгрузка выбранного фона
NegativeFox
Как модифицировать скрипт чтобы он изменял не общий фон а изображение в блоке:

Код
.sc-cover {background:url('/profile/ProfileBackground.jpg') #1d1d1d;background-size:cover;position:relative;height:180px;margin-bottom:60px}
Ромчик
Ни как, данный скрипт предназначен только для изменения фона.
NegativeFox
Очень жаль :(
avatar
-50% на шаблоны от TemplateMonster
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 3
Гостей: 3
Пользователей: 0