Signaler

HTML - modifier le background de mon site [Résolu]

Posez votre question DarkChou 27Messages postés lundi 2 janvier 2017Date d'inscription 28 juin 2017 Dernière intervention - Dernière réponse le 10 janv. 2017 à 14:48 par DarkChou
Bonjour,

je voudrai savoir quel bout de code html dois-je utiliser pour avoir une image différent sur mon site web a chaque nouvelle visite svp , je ne sais pas trop comment m'expliquer donc je vais vous montrer un exemple ^^'

( exemple : http://www.elderscrollsonline.com/fr/agegate ) comme vous le voyer a chaque fois que vous actualiser cet page le backgr change , si jamais vous pourriez m'aider je vous en serai infiniment reconnaissant

( désoler des fautes :/ )
Afficher la suite 
Utile
+1
plus moins
Il faut utiliser du PHP, le principe est juste de faire une liste des images qui serviront au background, de faire un tirage aléatoire de cette liste pour avoir une image au hasard, et de mettre l'image comme fond directement en HTML ou en modifiant du CSS.
Cette réponse vous a-t-elle aidé ?  
DarkChou 27Messages postés lundi 2 janvier 2017Date d'inscription 28 juin 2017 Dernière intervention - 2 janv. 2017 à 19:21
Merci beaucoup d'avoir répondu aussi rapidement , je suis désoler j'ai oublier de préciser que je suis un débutants dans tous sa ^^' je n'y connais rien au php :/ pourrais-tu m'expliquer la marge a suivre si cela ne vous dérange pas s.v.p
Répondre
DarkChou 27Messages postés lundi 2 janvier 2017Date d'inscription 28 juin 2017 Dernière intervention - 2 janv. 2017 à 22:43
encore merci d'avoir répondu aussi vite , j’avais trouver un code en php mais j'ai pas réussi a le faire fonctionner :/

<?php
header('Cache-Control: no-cache');
$imgs = array(
'image1.gif',
'image2.png',
'image3.jpeg',
'image4.gif'
);
$img_id = mt_rand(0,(count($imgs)-1));
header('Location: '.$imgs[$img_id]);
?>


mais entre temp j'ai trouver un autre code

<!doctype html>
<html lang="en">
<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=""quot;https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
var bgImage = [
'image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.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>


mais j'ai un petit soucis avec se code , je les tester avec 4 image en local j'ai fais plusieurs essaie , ils fonctionne correctement mais le problème c que sur les 4 image , seulement ' image2 ' et 'image3' apparait tout le temps , ' image1 ' apparait de temps en temps mais ' image4 ' pas du tout :/ existe t'il une façon de faire pour être sur que tout les image sois a la même fréquence ? fin je veut dire que je suis sur que tout les image apparaitra quand j'actualise

( ps : encore merci j'aurai pas trouver si tu n’avais pas repondu ^^ )
Répondre
ZeNairolf 1691Messages postés vendredi 6 mars 2009Date d'inscription 15 juin 2017 Dernière intervention - 2 janv. 2017 à 23:45
Tu peux faire en fonction du temps comme ceci:

header('Cache-Control: no-cache');
$imgs = array(
'image1.gif',
'image2.png',
'image3.jpeg',
'image4.gif'
);
$img_id = time()%count($imgs);
header('Location: '.$imgs[$img_id]);


Après je te déconseille de le faire en JS c'est jamais top de car il suffit que l'utilisateur désactive le JS ou que son PC bug au chargement pour que le background n'apparaise pas...
Répondre
DarkChou 27Messages postés lundi 2 janvier 2017Date d'inscription 28 juin 2017 Dernière intervention - 10 janv. 2017 à 14:48
Merci pour ton aide :) j'ai pu resoudre le probleme ^^
Répondre
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !