Nuovo sito, nuova feature studiata apposta, con jQuery e le API che intervengono sui CSS sono riuscito a costruire un semplice “background changer”, in modo da cambiare la fotografia di fondo al <body>.
Guardiamo il codice ovviamente includiamo nell’head il jquery.js:
HTML
<div class=”bg 1″>1</div>
<div class=”bg 2″>2</div>
CSS
body {
background: #fff url(skin/bg0.jpg) center top no-repeat fixed;
}
.bg {
position:realtive; float:left;
height: 19px; width: 19px;
text-align:center; line-height: 19px;
margin: 0px 1px 1px 0px;
background: #000; color: #fff;
cursor:pointer;
}
JAVASCRIPT
$(document).ready(function(){
$(”.bg.1″).click(function(){
$(”body”).css(’background-image’,'url(skin/bg1.jpg)’);
});
$(”.bg.2″).click(function(){
$(”body”).css(’background-image’,'url(skin/bg2.jpg)’);
});
});
Ora non mi resta che implementare i coockie (o con jquery.coockie.js plugin o direttamente con php) per conservare la scelta del background, se qualcuno ha idee per aggiunte, correzioni e o revisioni ecc, liberissimo di condividerle.
HTML valid
CSS valid
