Смена фона сайта на Cookie для uCoz
827материалов
228тем на форуме
3003комментария
6154пользователя

Смена фона сайта на 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
Материал просмотрен: 1699 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 7 комментариев

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

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


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

Код
.sc-cover {background:url('/profile/ProfileBackground.jpg') #1d1d1d;background-size:cover;position:relative;height:180px;margin-bottom:60px}
Ромчик
Ни как, данный скрипт предназначен только для изменения фона.
NegativeFox
Очень жаль :(
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта