Changer d'image à chaque actualisation de page [Résolu]

Signaler
-
 trini -
Bonjour,

J'ai plusieurs images pour mon background de ma page d'accueil et j'aimerai savoir si il était possible de pouvoir changer d'image à chaque actualisation de page.

J'ai déjà essayé de faire ceci (en vain) : 
<div class="image monImage <?php echo rand(1,4)?>"></div>


.image {width: 200px; height: 200px;}
.monImage1 {background: url(images/00.png) no-repeat top left}
.monImage2 {background: url(images/11.png) no-repeat top left}
.monImage3 {background: url(images/22.png) no-repeat top left}
.monImage4 {background: url(images/33.png) no-repeat top left}


Avec ces lignes de code, mon background reste tout noir et aucune photo s'affiche :/
Afficher la suite

2 réponses

Réponse 1 / 2
Messages postés
29877
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 octobre 2020
 2 884
Bonjour,

Le premier souci... c'est le cache du navigateur.
Il faut donc indiquer, dans ton head html, qu'il ne doit pas conserver de cache.

Le second souci.. c'est que tu as mis un espace entre le nom de ta class... et le code php qui génère le nombre aléatoire...

Mais perso, au lieu de passer par du PHP, je serai passé par du javascript...

un truc du genre
côté HTML, mettre un ID à ta div 
<div class="image" id="image"></div>

et côté js, un code du style : 
const arrUrlImg= ["images/00.png", "images/11.png", "images/22.png", "images/33.png"];
const url_image= Math.floor(Math.random() * arrUrlImg.length);
document.getElementById('image').style.backgroundImage = "url("+url_image+")";

Signaler

Bonjour,

Déjà merci beaucoup pour ta réponse.

Le premier souci est que je ne sais pas comment indiquer dans mon head qu'il ne doit pas conserver le cache. J'ai trouvé quelques codes sur internet : 
<meta http-equiv="pragma" content="no-cache" />

<meta http-equiv="cache-control" content="no-cache">

Mais toujours sans succès, ça ne fonctionne toujours pas même avec ces codes.

En suite, je passe seulement en deuxième année de BTS donc je ne sais pas encore utiliser de javascript donc j'ai juste essayé de faire un copier-coller de ton code pour seulement voir si ça fonctionnait mais.. toujours sans succès :/
Signaler
Messages postés
29877
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 octobre 2020
 2 884 > trini
Le code que tu as trouvé est celui à utiliser en effet.
Par contre, toi, tu dois vider le cache de ton navigateur avant de ré-afficher ton site ( les lignes de code n'y étant pas la première fois que tu l'a affiché... )
https://www.google.com/search?q=vider+le+cache+de+son+navigateu

En suite, je passe seulement en deuxième année de BTS donc je ne sais pas encore utiliser de javascript

Je n'arrive toujours pas à comprendre comment l'éducation nationale peut vous faire faire du web sans commencer par le javascript !
Efin bon...

Sinon, avec ton code php... as tu corrigé l'espace en trop comme je te l'ai indiqué ?
En plus, n'aurais tu pas oublié des quotes dans ton css ??
https://developer.mozilla.org/fr/docs/Web/CSS/background 

.monImage1 {background: url("images/00.png") no-repeat top left}


Lorsque tu examines ta page avec les outils de dev de ton navigateur ( F12), vois tu bien la class sur ta div ?



Avec mon code JS,
As tu des erreurs dans la console JS de ton navigateur ( là aussi, accessible via la touche F12 de ton clavier ) ?
Signaler
>
Messages postés
29877
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 octobre 2020
Alors, bonne nouvelle, j'arrive à afficher des petites images de la même taille donc je pense que je dois m'arranger pour que tous mes fonds soient à la même taille pour essayer si ça fonctionne.

Pour le code JS, voila ce que je vois avec l'inspecteur d'éléments 
<div class="image" id="image" style="background-image: url("2");"></div>

const arrUrlImg= ["images/00.jpg", "images/11.jpg", "images/22.jpg", "images/33.jpg"];
const url_image= Math.floor(Math.random() * arrUrlImg.length);
document.getElementById('image').style.backgroundImage = "url("+url_image+")";


Tu vas peut être avoir envie de me tuer si ça ne fonctionne pas à cause de l'endroit où j'ai mis le script ahah, car je ne sais pas où le placer donc je l'ai mis juste en dessous du div. Ensuite sur le div le 
style="background-image: url("2");"
c'est rajouté tout seul, il n'est pas dans mes lignes de code.
Signaler
Messages postés
29877
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 octobre 2020
 2 884 > trini
Petite erreur de ma part

ça devrait être mieux comme ça. 
const arrUrlImg= ["images/00.jpg", "images/11.jpg", "images/22.jpg", "images/33.jpg"];
var choix = Math.floor(Math.random() * arrUrlImg.length);
var url_image = arrUrlImg[choix];
document.getElementById('image').style.backgroundImage = "url("+url_image+")";
Réponse 2 / 2

En tout cas merci beaucoup pour ton aide !! J'ai réussi avec le php, il fallait juste mettre les meta pour le cache et toutes les images de la même taille, encore merci :) maintenant il me reste plus qu'a réussir à agrandir des icones de 96px en 180px sans perte de qualité et mon premier site internet sera en ligne :)
Signaler
Messages postés
29877
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 octobre 2020
 2 884
pense à mettre le sujet en résolu.

Bonne journée
Signaler
>
Messages postés
29877
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 octobre 2020
bonne journée et merci encore :)
Répondre Posez votre question