Si vous actualisez ce blogue-ci, vous devriez remarquez que j'ai en réalité 3 bannières . Vous en voulez autant, sinon plus. Continuez à lire ces lignes!
D'abord, la bannière se trouve imbriquée à même le CSS, donc il faut trouvé un moyen de changer le CSS du blogue. Appelons alors notre ami Javascript à la rescousse!!!
Rien de sorcier, en vérité, pour ce petit truc, car tout nous a été dévoilé au cours des dernières semaines et un petit plongeon sur le
site de Mozilla afin de mieux comprendre les fonctions que nous voulons utiliser comble les quelques rares infos manquantes.
Gardant en tête que le dernier CSS prend toujours le dessus sur les précédents (la fameuse cascade) tout ce que nous devons faire est de créer un nouveau CSS pour la section de l'en-tête après celui qui existe déjà; mais avant qu'il soit appliqué. Dans mon cas, l'ID se nomme "blog-header"; donc mon javascript devra générer un ID du même nom, ce qui complèteras celui déjà existant, conservant ce qui est différent et écrasant les paramètres identiques.
D'abord il faut les bannières que l'on place dans un tableau (array) comme suit:
var banniere= new Array()banniere[0]="http://www.Blogbanner.jpg"banniere[1]="http://www.Blogbanner2.jpg"banniere[2]="http://www.Blogbanner3.jpg"...etc...
Ensuite, pour générer aléatoirement un nombre faisant appel au valeur du tableau un simple Math.random fera l'affaire. Glissons la valeur renvoyé par la fonction dans une variable question d'y faire appel plus facilement après:
var random=Math.round(2*Math.random());
Notez que j'ai mis Math.round pour éviter les entiers décimaux et que le 2 représente la valeur maximal de mon tableau, si j'avais eût 100 bannières, j'aurais inscrit 99*Math.random.
Ensuite ne reste plus qu'à inscrire notre CSS grâce à la plus simple des fonctions: Document.write. N'oubliez pas, "doc.write" écrit les chaînes de caractères à l'endroit même où se trouve le script. Donc, il est primordial que le script soit placé avant l'appel de l'ID par le "Div" de votre en-tête. La meilleure place, sans équivoque, reste au tout début du BODY de votre page. Afin de bien comprendre, notez que je simule totalement la création du style CSS. Ce qui va donc comme suit:
Comme vous le voyez, rien n'est oublié. L'appel de la balise de style, les accolades et la fermeture de la balise de style. Banniere[random] appel donc les 2 variables que j'ai créer plus haut. Les "+" font leur travail de concaténation, donnant l'illusion au navigateur que les valeurs des variables font partie intégrante de la chaîne de caractères.
Amusez-vous Bien!
