Code background aléatoire !

Résolu

BloodyXMary Messages postés 6 Statut Membre -
BloodyXMary Messages postés 6 Statut Membre - 7 nov. 2016 à 18:45

Bonjour je cherche à créer un site avec des effets, l'un de ses effets est que a chaque chargement une certaine image choisie aléatoirement soit mise en background. Apres maintes et maintes recherche j'en suis arrivé à pouvoir sélectionner une image aléatoirement et l'afficher mais pas en background. Des idées pour l'appliquer en background ?
Voici le code:

<p id="demo"></p>
            <body onload="elchapo()" onresize="elchapo()">
             <div class="images"><img id="imagevalue" src="" /></div>
            </body>

            <script type="text/javascript">
                function elchapo() {
                    var x = Math.floor((Math.random() * 3) + 1);
                    

                    var image = document.getElementById("imagevalue");
                    if (x == 1) {
                       image.src="plage.jpg";
                    } else if (x == 2) {
                       image.src="montagne.jpg";
                    } else if (x == 3) {
                       image.src="scene.jpg";
                    }
                }

                window.onload=elchapo();
            </script>

Afficher la suite

1 réponse

codeurh24 Messages postés 760 Date d'inscription Statut Membre Dernière intervention 123

Bonjour.


<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>background image aléatoire</title>
  <style>
	/* adapte l'image de fond 
	sur la largeur et la hauteur 
	de la page html */
	body, html{
		background-size: cover;
		width:100%;
		height:100%;
		padding:0;
		margin:0;
	}
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
var bgImage = [
'http://img4.hostingpics.net/pics/604727WallpaperHD11F1.jpg',
'http://img4.hostingpics.net/pics/705951135353683486493.jpg',
'http://img4.hostingpics.net/pics/413614windowsvista3720px.jpg',
'http://img4.hostingpics.net/pics/537958amdcomputergamingposterbackground415443.jpg',
'http://img4.hostingpics.net/pics/698903intelxeonprocessorchess5638602x339.jpg',
'http://img4.hostingpics.net/pics/7433395WsquLs.png',
'http://img4.hostingpics.net/pics/697356battlefield3tanksHD1024x576.jpg',
'http://img4.hostingpics.net/pics/494132alienwarebluelogo579.jpg'
]
$( function() {
// nombre max d'images que le tableau bgImage contient
var bgCount = bgImage.length-1; 

do{
// change d'image aléatoirement 
index = Math.floor((Math.random() * bgCount) );

// recommence a changer d'image si celle d'avant etait la meme
}while( index == localStorage.getItem("lastIndex")  )

// mémorise la nouvelle image pour comparer
// au prochain rechargement de la page
localStorage.setItem("lastIndex",index);

// met une image de fond dans la page html
$( "body" ).css('background-image', "url("+bgImage[index]+")");
});
</script>
</head>
<body>
</body>
</html>

Code indenté ici: https://pastebin.com/1hV17mVT

BloodyXMary Messages postés 6 Statut Membre

Merci beaucoup !
0

Code background aléatoire !

1 réponse

Discussions similaires

Newsletters