Changer d'image à chaque actualisation de page
Résolu
ratchet
-
trini -
trini -
A voir également:
- Changer d'image à chaque actualisation de page
- Changer dns - Guide
- Supprimer une page word - Guide
- Changer de carte graphique - Guide
- Image iso - Guide
- Changer clavier qwerty en azerty - Guide
2 réponses
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
et côté js, un code du style :
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+")";
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 :)
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 :
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 :/
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
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 ) ?
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.ç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+")";