Changer d'image à chaque actualisation de page

Résolu/Fermé

ratchet - 29 juil. 2020 à 14:36
trini - 30 juil. 2020 à 11:17

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 :/

A voir également:

Changer d'image à chaque actualisation de page
Changer dns - Guide
Supprimer une page word - Guide
Image iso - Guide
Changer clavier qwerty en azerty - Guide
Word numéro de page 1/2 - Guide

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38284 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 11 novembre 2024 4 697
29 juil. 2020 à 16:17

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+")";

trini
30 juil. 2020 à 09:21

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 :/

jordane45 Messages postés 38284 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 11 novembre 2024 4 697 > trini
30 juil. 2020 à 09:39

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 ) ?

trini > jordane45 Messages postés 38284 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 11 novembre 2024
30 juil. 2020 à 10:06

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.

jordane45 Messages postés 38284 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 11 novembre 2024 4 697 > trini
30 juil. 2020 à 11:14

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

trini
30 juil. 2020 à 10:21

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 :)

jordane45 Messages postés 38284 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 11 novembre 2024 4 697
30 juil. 2020 à 11:15

pense à mettre le sujet en résolu.

Bonne journée

trini > jordane45 Messages postés 38284 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 11 novembre 2024
30 juil. 2020 à 11:17

bonne journée et merci encore :)

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

[référencement] Ne pas être référencé

Comment enlever le rouge sur la photo svp ?