(1 vote(s), 
Loading...But : utiliser des fonds aléatoires sur un blog/site (démonstration).
On m'a récemment demandé s'il était possible d'utiliser un fond (background) aléatoire sur un blog. La réponse est oui, c'est même très simple.
Avant tout, sachez qu'il existe bon nombre de méthodes pour y parvenir, des plus simples aux plus saugrenues voir lourdes pour votre serveur.
La solution pour laquelle j'ai opté ne consommera aucune ressource supplémentaire vis-à-vis d'un fond unique. Elle est également compatible avec tous les systèmes de cache existants (WP-SuperCache inclus) puisque le code javascript s'exécute sur la partie cliente, c'est à dire le navigateur de l'internaute.
Pré-requis
Il vous faut bien évidemment créer vos fonds et les placer de préférence dans le même répertoire, bien que ce ne soit en rien une obligation.
Pour l'aspect pratique nous utiliserons un chiffre pour distinguer les fonds : fond1.jpg, fond2.jpg, fond3.jpg, etc.
Une pincée de CSS
Nous allons tout simplement jouer sur le contenu de la feuille de style. L'image de fond va être appliquée directement sur la balise BODY.
Nous devons dans un premier temps définir les différents attributs pour le fond :
body { background-repeat: no-repeat; }
Puis, créez X classes CSS, X correspondant même nombre que vous avez de fonds :
.ban1 { background-image: url('images/fond1.png'); }
.ban2 { background-image: url('images/fond2.png'); }
.ban3 { background-image: url('images/fond3.png'); }
Enregistrez et envoyez votre fichier CSS sur le serveur, puis passons à la suite.
Un grain de javascript
La dernière étape consiste à ajouter une ligne de code Javascript pour permettre l'appel aléatoire d'une des classes CSS, chacune faisant appel à un fond différent.
Remplacer votre balise "<body>" par :
<script type="text/javascript">
var banListe=['1','2','3'];
document.write('<body class="ban' + banListe[Math.floor(Math.random()*banListe.length)] +'">');
</script>
C'est fini !
Conclusion
Enregistrez et envoyer tous les fichiers modifiés, pensez à vider votr système de cache si vous en utilisez-un.
Cette méthode est simple mais fonctionnelle. Vous pouvez tout à fait utiliser jQuery, mootools, ou tout autre framework JavaScript si vous êtes à l'aise avec. N'hésitez pas à partager votre code dans les commentaires.
Voir la démonstration.
7 commentaires
Merci bien, je garde ça sous le code 🙂
Il me semble que le 1er lien de démo tout en haut de l'article est mauvais, celui qui est dans cette phrase :
"But : utiliser des fonds aléatoires sur un blog/site (démonstration)."
A+
@Crunch : c'est corrigé, merci
j'aime pas trop générer le body en javascript.. c'est pas propre.. pas valide w3c etc..
je propose
document.getElementsByTagName('body')[0].className += 'ban' + banListe[Math.floor(Math.random()*banListe.length)];
(à tester.. c'est pondu from scratch..)
@michael : tu as tout à fait raison côté propreté, bien que que soit la méthode la plus simple.
On peut également utiliser un div après le body, ou bien un CSS dynamique (php), ou bien insérer le code JS au "milieu" de la balise body pour ne pas la "gêner".
Je viens de tester ton code, il fonctionne 😉
Merci pour l'info 😉
Simple et efficace, merci pour le partage!
super astuce, simple et très pratique 😉