Rotation de l'image de fond

By
Advertisement

Nous avions déjà vu qu’il y avait moyen de commander une rotation des bannières sur son blog afin qu’à chaque nouvelle page chargée, ce soit une nouvelle bannière qui s’affiche.

Il existe aussi la possibilité de faire roter l’image de fond de son blog afin qu’à chaque nouvelle page chargée, ce soit un nouveau fond de page qui s’affiche. Cette astuce peut être utilisée simultanément avec celle pour la rotation de bannière afin de faire concorder la nouvelle bannière affichée avec la nouvelle image de fond de page.

Je crois que pour cela, il faudra mettre la bannière 1 en concordance avec l’image de fond 1, la bannière 2 avec l’image de fond 2, etc.

Pour ajouter la fonctionnalité de rotation de l’image de fond :

1. Se connecter à son compte, aller sur « mise en page », puis sur « modifier le code html » et là, ajouter le code javascript suivant juste après :

<script type="text/javascript">
var banner= new Array()
banner[0]=" URL Image01"
banner[1]=" URL Image02"
banner[2]=" URL Image03"
banner[3]=" URL Image04"
banner[4]=" URL Image05"
banner[5]=" URL Image06"
banner[6]=" URL Image07"
banner[7]=" URL Image08"
banner[8]=" URL Image09"
banner[9]=" URL Image10"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background:url("' + banner[random] + '") repeat center center;');
document.write(" }");
document.write("</style>");
</script>

Prenez soin de remplacer « ULR Imagexx » par l’url de l’image de fond que vous aurez hébergé sur votre compte « Google page creator » ou sur « Photobucket ».

Au cas où vous avez plus d'image à afficher, ajoutez ligne banner[10]=" URL Image11" etc. et changez le 10 en rouge par le nombre de bannières que vous afficherez. De même, si vous avez moins d'image à afficher, 5 par exemple, effacez les lignes banner[5]=" URL Image6" à banner[9]=" URL Image10".

Si vous avez une petite image qui doit constituer l'image de fond, laissez l'attribut «repeat». Si vous avez une grande image qui couvrira le blog entier et voulez qu’elle soit fixe, changez le «repeat center center» en «no-repeat fixed».

Merci à Jim pour l'astuce.

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Mybloglog et celle sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.



2 commentaires:

  1. Bonjour,
    je trouve que ton blog est une mine d'infos perpetuelles, à chaque fois que je cherche un truc je le trouve chez toi!! comme par exemple cet article pour changer le fond lorsque l'on change de page... le seul hic c'est que je souhaite attribuer un fond pour chaque page et pas que ça soit en "random", exemple attribuer un fond précis pour la page d'acceuil et un autre fond pour les autres pages (archives, présentation...)
    t'aurais pas un ptit code de derrière les fagots...
    Merci beaucoup...

    RépondreSupprimer
  2. Salut,
    c'est génial ce code mais pourquoi j'ai la couleur d'arrière du background qui passe au dessus de mes images de fond?? J'ai beau bidouiller, rien n'y fait. Aurais-tu une solution?? Merci d'avance et bonne continuation pour ton blog :)

    RépondreSupprimer

Salut Cher Lecteur.

Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.

Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.

Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT