Changer en random un background-image onclick
Samz666
-
GZARA -
GZARA -
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
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:
- Changer en random un background-image onclick
- Changer dns - Guide
- Changer clavier qwerty en azerty - Guide
- Windows 7 logon background changer - Télécharger - Thèmes & Fonds d'écran
- Changer carte graphique - Guide
- Image iso - Guide
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>
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>