• Страница 1 из 1
  • 1
Модератор форума: JonMagon  
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Смена фона по клику (Требуется небольшая помощь)
Смена фона по клику
DenCore
Сообщений: 29
Репутация: 1

Сообщение # 1 | 23:21:30 12 Май 2015
Интро

Изначально задавал вопрос в теме, а теперь решил поделиться рабочим решением. Тем не менее код, как заметили ниже, не "идеален", так что помощь приветствуется.

Описание работы скрипта

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

Установка

1. Установка JS-скриптов. Совет: сохраните скрипты в отдельные файлы с расширением js, загрузите их на сервер через файловый менеджер, а на страницах указывайте путь к ним, например:

Код
<script type="text/javascript" src="http://review-it.ru/cookie.js"></script>    
<script type="text/javascript" src="http://review-it.ru/cok.js"></script>
       
</body>

Тогда не придется менять скрипт на каждой отдельной странице. Важно: скрипты на странице или ссылки на них должны идти именно в таком порядке как здесь!

Копируем js-код для сохранения cookies. Вставляем перед </body> на тех страницах, где хотите, чтобы скрипт работал.

Код
function setCookie(name, value, days) {
    if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    var expires = "; expires=" + date.toGMTString();
    }
    else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}
function eraseCookie(name) {
    setCookie(name, "", -1);
};


Копируем js-код для смены фона. Вставляем перед </body> на тех страницах, где хотите, чтобы скрипт работал.

Код
$('#jp1').click(function() {    
setCookie('j1', 365);    
eraseCookie('j2'); eraseCookie('j3');
$('body').css('background-image', 'url("/img/bg.jpg")');    
};);    
$('#jp2').click(function() {    
setCookie('j2', 365);    
eraseCookie('j1'); eraseCookie('j3');
$('body').css('background', '#ccc');    
};);    
$('#jp3').click(function() {    
setCookie('j3', 365);    
eraseCookie('j1'); eraseCookie('j2');
$('body').css('background', '#444');    
};);    

if(getCookie('j1')) {    
$('body').css('background-image', 'url("/img/bg.jpg")');    
};    
if(getCookie('j2')) {    
$('body').css('background', '#ccc');    
};    
if(getCookie('j3')) {    
$('body').css('background', '#444');    
};

Обратите внимание на две одинаковые строчки:

Код
$('body').css('background-image', 'url("/img/bg.jpg")');

Здесь пропишите путь к своему фоновому изображению, если же хотите просто указать код цвета, то измените эту строчку:

Код
$('body').css('background', '#ваш цвет');

2. Устанавливаем следующий код там, где хотим видеть ссылки для смены фона.

Код
<div class="bgChange">
<a href="#" id="jp1">Стильный</a>    
<a href="#" id="jp2">Светлый</a>
<a href="#" id="jp3">Темный</a>    
</div>

Вместо ссылок могут быть т.н. демо-картинки. Для этого в <a></a> вместо текста поместите тег <img> с нужными картинками.

3. Устанавливаем в таблицу стилей CSS следующий код:


Код
.bgChange {
}
       
.bgChange a {
    padding-left: 15px;    
}


В данных классах CSS вы можете прописывать абсолютно любые стили, настраивая вывод ссылок под дизайн своего сайта.
Сообщение отредактировал DenCore - Среда, 13 Май 2015, 13:01:02
webanet
Сообщений: 24067
Репутация: 4985

Сообщение # 2 | 23:26:03 12 Май 2015
DenCore, логичнее всего было бы расположить эти скрипты перед боди, а не там откуда они у вас не работают. попробуйте закинуть их повыше. в хед например
ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/
DenCore
Сообщений: 29
Репутация: 1

Сообщение # 3 | 23:32:04 12 Май 2015
webanet, угу, все варианты перепробовал сейчас, работают только перед </body>

А я так надеялся на всех страницах не прописывать, ну ладно smile

upd: переделал немного, все работает. Теперь может кому рабочий скрипт пригодится.
Сообщение отредактировал DenCore - Среда, 13 Май 2015, 12:04:19
K1l0
Сообщений: 106
Репутация: 26

Сообщение # 4 | 12:52:50 13 Май 2015
Цитата DenCore ()
переделал немного, все работает. Теперь может кому рабочий скрипт пригодится.
Вы не обижайтесь пожалуйста, но это быдло код. Работать то работает, но вот выглядит это на троечку.
Не лучше ли использовать одну куку, а не три. И просто менять её содержимое или удалять. Подумайте над этим.
DenCore
Сообщений: 29
Репутация: 1

Сообщение # 5 | 12:58:02 13 Май 2015
K1l0, какие обиды. Напротив, помощь приветствуется. Хотелось бы сделать рабочее решение с минимумом аккуратного кода.
Dogica
Сообщений: 1230
Репутация: 353
Уровень замечаний:

Сообщение # 6 | 14:45:07 13 Май 2015
Пользуюсь вот таким кодом.. он меньше на порядок и не грузит сайт абсолютно
но никаких запоминаний настройки и файлов печенюшек в нем нет

Код
<a alt="CHANGE DOGICA® SKIN" href="javascript://" [b]onclick="changeBg(this);return false;">

<script type="text/javascript">
function changeBg(e){
var bg=[
"ПУТЬ К КАРТИНКЕ №1",
"ПУТЬ К КАРТИНКЕ №2",
],i=e.rel;if(i>bg.length-1){i=0;}
document.getElementById('myBody').style.backgroundImage='url('+bg[i]+')';
i++;e.rel=i;
if(!e.has){e.has=true;for (var i in bg){var pr=document.createElement('img');pr.setAttribute('src',bg);}};
}</script>

WWW.DOGICA.COM / WWW.DOGICA.ORG
Сообщение отредактировал Dogica - Среда, 13 Май 2015, 16:59:10
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Смена фона по клику (Требуется небольшая помощь)
  • Страница 1 из 1
  • 1
Поиск: