Изменяемый фон сайта с использованием Cookie
Скачиваем папку fon с помощью кнопки ниже и заливаем в корень сайта в файловый менеджер
Вставляем следующий код туда, где ходим видеть кнопку:
<script src="/fon/cookie.js"></script>
<div class="ff_fon">
<a href="#" class="drox"><img alt="fon" title="Сменить фон сайта" src="/fon/ico_panel.png"></a>
<div class="ff_cell_ff">
<span class="ff_ugol_ff"></span>
<div class="ff_content_en">
<a href="#"><img id="jp1" src="/fon/1.jpg"></a>
<a href="#"><img id="jp2" src="/fon/2.jpg"></a>
<a href="#"><img id="jp3" src="/fon/3.jpg"></a>
<a href="#"><img id="jp4" src="/fon/4.jpg"></a>
<a href="#"><img id="jp5" src="/fon/5.jpg"></a>
<a href="#"><img id="jp6" src="/fon/6.jpg"></a>
<a href="#"><img id="jp7" src="/fon/7.jpg"></a>
<a href="#"><img id="jp8" src="/fon/8.jpg"></a>
<a href="#"><img id="jp9" src="/fon/9.jpg"></a>
</div>
</div>
</div>
<script src="/fon/cok.js"></script>
<div class="ff_fon">
<a href="#" class="drox"><img alt="fon" title="Сменить фон сайта" src="/fon/ico_panel.png"></a>
<div class="ff_cell_ff">
<span class="ff_ugol_ff"></span>
<div class="ff_content_en">
<a href="#"><img id="jp1" src="/fon/1.jpg"></a>
<a href="#"><img id="jp2" src="/fon/2.jpg"></a>
<a href="#"><img id="jp3" src="/fon/3.jpg"></a>
<a href="#"><img id="jp4" src="/fon/4.jpg"></a>
<a href="#"><img id="jp5" src="/fon/5.jpg"></a>
<a href="#"><img id="jp6" src="/fon/6.jpg"></a>
<a href="#"><img id="jp7" src="/fon/7.jpg"></a>
<a href="#"><img id="jp8" src="/fon/8.jpg"></a>
<a href="#"><img id="jp9" src="/fon/9.jpg"></a>
</div>
</div>
</div>
<script src="/fon/cok.js"></script>
Вставляем в самый низ таблицы стилей CSS:
.ff_fon {
float:right;
display:block;
position:relative;}
.ff_fon .drox {padding: 0px 7px;}
.ff_cell_ff, .ff_ugol_ff {width:35px;}
.ff_cell_ff {
left:-999em;
z-index:998;
position:absolute;
margin: 0 -2px 0 auto;}
.ff_content_en {
margin:0;
width:35px;
text-align:center;
overflow:hidden;
background:#333;}
.ff_content_en a:link,
.ff_content_en a:visited {
float:left;
width:35px;
padding: 5px 0px 3px 0px;
border-bottom: 1px solid #888;}
.ff_content_en a:hover {background:#5f5f5f;}
.no_bb:link,
.no_bb:visited {border-bottom:none!important;}
.ff_fon:hover .ff_cell_ff{
top:27px;
right:0;
left:auto;}
.ff_ugol_ff {
height:7px;
top: -7px;
position:absolute;
background:url(/fon/ugolok.png) no-repeat center bottom;}
float:right;
display:block;
position:relative;}
.ff_fon .drox {padding: 0px 7px;}
.ff_cell_ff, .ff_ugol_ff {width:35px;}
.ff_cell_ff {
left:-999em;
z-index:998;
position:absolute;
margin: 0 -2px 0 auto;}
.ff_content_en {
margin:0;
width:35px;
text-align:center;
overflow:hidden;
background:#333;}
.ff_content_en a:link,
.ff_content_en a:visited {
float:left;
width:35px;
padding: 5px 0px 3px 0px;
border-bottom: 1px solid #888;}
.ff_content_en a:hover {background:#5f5f5f;}
.no_bb:link,
.no_bb:visited {border-bottom:none!important;}
.ff_fon:hover .ff_cell_ff{
top:27px;
right:0;
left:auto;}
.ff_ugol_ff {
height:7px;
top: -7px;
position:absolute;
background:url(/fon/ugolok.png) no-repeat center bottom;}
Использовать собственные фоны можно заменив /fon/1.jpg и другие ссылками на нужные фоны.