Curseur jquery pour changer l'arrière-plan du corps

Question

Je veux inclure un mini-menu 20px par 20px images d'arrière-plans potentiels. Lorsqu'un utilisateur clique dessus, l'image d'arrière-plan du corps change et la sélection est enregistrée comme choix de l'utilisateur.

J'ai pensé à utiliser un curseur mais je ne sais pas comment je pourrais avoir les images dans un li et être capable de changer le corps CSS en fonction de la sélection.

Des idées?

4ème heureux Juillet

EDIT J'essaie de sauver l'URL img dans ce cookie, son tho qui ne travaillent pas, son économie dans le cookie, mais ce ne est pas récupérer le contenu des cookies

EDIT le ci-dessous travaux, !!!!!!! mais la couleur de fond est toujours blanc, même si j'ajouter un $("html").css("background-color","red");

FIX, ajouté de la couleur à la fin de l'url

$("html").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top #343837"); 


$(document).ready(function() { 
$("#BGSelector a").click(function() { 
    var imgLink = $("img", this).attr("src"); 
    $.cookie("html_img", "" + imgLink + "", { expires: 7 }); 
    var imgCookieLink = $.cookie("html_img"); 
    $("html").css("background", "url('" + imgCookieLink + "')"); 
}); 
}); 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#BGSelector a").click(function() { 
     var imgLink = $("img", this).attr("src"); 
     $.cookie("html_img", "" + imgLink + "", { path: '/vitamovie', expires: 7 }); 
     var imgCookieLink = $.cookie("html_img");  
     $("html").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top"); 
    }); 
}); 

</script> 

<script type="text/javascript"> 
$(document).ready(function() { 
     var imgCookieLink = $.cookie("html_img"); 
     $("html").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top"); 

}); 

</script> 

Answer 1

Aucune idée pourquoi vous utilisez curseur en termes de « choisir » quelque chose qui est discret. En règle générale, un curseur est pour certaines valeurs de changement continu, comme la sélection de la valeur RVB (que chaque canal commence de 0 à 255). Pour votre truc mini-menu, qui est très simple JQ + CSS:

Balise HTML pour le menu

<ul id="BGSelector"> 
    <li><a href="#ChangeBG"><img src="bgImageSource1"/></a></li> 
    <li><a href="#ChangeBG"><img src="bgImageSource2"/></a></li> 
    <li><a href="#ChangeBG"><img src="bgImageSource3"/></a></li> 
</ul> 

Et les déclarations JQ magique

// Init the bg change UI (which is within document ready) 
$(function(){ 
    $("#BGSelector a").click(function() { 
     var imgLink = $("img", this).attr("src"); 

     // change the body background css 
     $("body").css("background", "url('" + imgLink + "')"); 
    }); 
}); 

Answer 2

J'ai eu le même problème. Je ne sais pas si cela peut être utile mais, ce que j'ai fait était

var url= data.bgimg[0] ; 
$('body').css('background-image',"url(" + url + ")"); 

où url est (évidemment) le chemin vers le img. Je l'ai eu via json mais vous pouvez le changer.

Answer 3

var newBg = ['headercaption.gif', 'loading.gif', 'excelexport.gif', 'grid-layer.gif']; 
var path="themes/default/images/"; 
var i = 0; 
var rotateBg = setInterval(function(){ 
    $('body').css('backgroundImage' , "url('" +path+newBg[i]+ "')"); 
    if(i==4) 
    i=0; 
    else 
     i++; 
}, 5000);