» »

Функция выбора фона на сайте uCoz


Функция выбора фона на сайте uCoz

Тут вы согласитесь, что основном на всех сайтах или блогах стоит один фон по умолчанию. А если сделать так и дать право выбора пользователю, какой фонему нравиться и он может его выставить и тот будет постоянно стоять, пока он не поменяет на другой. Здесь хочется сказать, что этот скрипт подойдет для сайта, который фиксирован по своей ширине и у него есть большое пространства для фона. Когда вы уже поставили и автоматически cookie запоминает ваш выбор. Это для того, чтоб если вы вышли и опять зашли, вам не приходилось обратно устанавливать.

Установка:

Нужно скачать архив и залить его на сайт в корень его в папку background там и будут изображение, которые вы можете поменять, так как у каждого свои вкусы и тематика тоже диктует свои правила.

Теперь ищем место, где будет стоять кнопка и ставим там скрипт.

Код
<script src="/background/cookie.js"></script>  
<div class="ff_fon">  
<a href="#" class="drox"><img alt="fon" title="Сменить фон сайта" src="/background/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="/background/1.jpg" width="20px" /></a>  
<a href="#"><img id="jp2" src="/background/2.jpg" width="20px" /></a>  
<a href="#"><img id="jp3" src="/background/3.jpg" width="20px" /></a>  
<a href="#"><img id="jp4" src="/background/4.jpg" width="20px" /></a>  
<a href="#"><img id="jp5" src="/background/5.jpg" width="20px" /></a>  
<a href="#"><img id="jp6" src="/background/6.jpg" width="20px" /></a>  
<a href="#"><img id="jp7" src="/background/7.jpg" width="20px" /></a>  
<a href="#"><img id="jp8" src="/background/8.jpg" width="20px" /></a>  
<a href="#"><img id="jp9" src="/background/9.jpg" width="20px" /></a>  
</div>  
</div>  
</div>  
<script src="/background/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;
}


Сами стили можно установить в низу, в самом подвале его.
Источник: Yraaa.ru
01.12.2015 Загрузок: 14 Просмотров: 570 Комментарий: (3)

Поделиться в социальных сетях

Материал разместил

Комментарий: 3
ZruBkul
ZruBkul 01.12.2015 22:481
0
Интересное решение м картинками, раньше было только с оттенком, а сейчас серьезней стало.
Kosten
Kosten 01.12.2015 22:542
0
ZruBkul, вообще как то не понимаю для чего все это. Но сделан ресурс и все, работаем общаемся, зачем эти фишки, это плюс совершенно лишнее коды для сайта, но возможно кому то и нужны. Вообщем редко видел на гамму цвета, на изображение точно не скажу, вообще не видел.
Сопрано
Сопрано 01.12.2015 23:193
0
А что, кнопка почти прозрачная и она вообще не будетт видна и этим дизайну не чего не угрожает, мне понравился скрипт, дать всем права на выбор под себя фона.
avatar