Changer en random un background-image onclick

Fermé
Samz666 - 26 août 2009 à 19:15
 GZARA - 21 avril 2014 à 22:35
Bonjour,

Je n'arrive pas à trouver exactement ce que je veux, et je ne suis pas très "callé" en javascript pour développer cela, voici ce que j'aimerais faire sur mon site internet:

J'ai une image d'arrière plan sur mon tag body du genre body style="background:url(/img/bg/bg01.jpg) no-repeat; background-position:center; background-attachment:fixed; background-color:#000000;"

et j'ai un bouton du genre <div id="monbouton"><a href=""><img src="/img/bouton.gif"></a></div>

J'aimerais faire en sorte que en cliquant sur mon bouton "bouton.gif" , le style background de mon tag body change par une autre image d'une liste, random si possible.

par exemple, j'aurais dans mon dossier 5 images pour le background:

- bg01.jpg
- bg02.jpg
- bg03.jpg
- bg04.jpg
- bg05.jpg

Quand je clique sur le bouton, un random se créer et le bg01 est remplacé par le bg04, si je reclique, le bg04 est remplacé par le bg02 etc, aléatoirement...

Pourriez vous m'aidez à résoudre se que je n'arrive pas à faire?

Merci beaucoup de votre aide.

Samuel
A voir également:

2 réponses

J'ai réglé mon problème, voici le code que j'ai utilisé

var rand1 = 0;
var useRand = 0;

images = new Array;
images[1] = new Image();
images[1]= "url(/img/bg/bg01.jpg) no-repeat center fixed #000000";
images[2] = new Image();
images[2]= "url(/img/bg/bg02.jpg) no-repeat center fixed #000000";
images[3] = new Image();
images[3]= "url(/img/bg/bg03.jpg) no-repeat center fixed #000000";
images[4] = new Image();
images[4]= "url(/img/bg/bg04.jpg) no-repeat center fixed #000000";
images[5] = new Image();
images[5]= "url(/img/bg/bg05.jpg) no-repeat center fixed #000000";

function swapPic() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
document.body.style.background= images[useRand];
}
// End -->
</script>
1
merci bien il marche bien
0