Bannières rotatives Bannières avec liens par Django (Oznog) Blais, Trucsweb (4 Décembre 1997)
Mise-à-jour : 11 juin 2005
C'est le premier truc que j'ai réalisé pour les «Trucsweb», à l'époque où je ne disposais pas d'un répertoire «CGI» ou autre technologie serveur. Et puisque tous les sites anglais sur le Javascript disposaient d'une telle technologie, aucun n'offrait ce genre de script à part la bannière dans un cadre (frameset) qui n'est pas très pratique ni esthétique. Le besoin reste entier 8 ans plus tard, bien que les choses se soient grandement améliorées. J'ai donc fait une petite mise à jour au script «twRotation» avec un petit ajout. Notez que le code pourrait utiliser le "document.getElementById(monID).src" au lieu de l'objet images que j'utilise ici pour sa grande compatibilité. C'est d'ailleurs la grande force de ce script.
L'essentiel de ce script consiste à (1) afficher plusieurs bannières, l'une après l'autre dans une page Web. Avec un (2) url et une (3) description (topic) unique pour chacune des bannières. Pour ce faire, ce petit constructeur pour créer un objet avec 3 attributs :
function twBanniere(_url,_src,_texte) {
this.src=_src;
this.url=_url;
this.texte=_texte;
}
Il suffit de peupler une matrice de cette façon :
aBannieres = new Array();
aBannieres[0] = new twBanniere('http://www.trucsweb.com/','/images/image1.png','Titre 1');
aBannieres[1] = new twBanniere('http://www.google.com/','/images/image2.png','Titre 2');
aBannieres[2] = new twBanniere('http://www.w3c.org/','/images/image3.png','Titre 3');
// En passant, spécifier le délai entre
// le changement de bannière (en seconde)
var nBanDelai = 10;
Voilà pour la configuration. Simple non? Voyons pour l'explication...
1. L'objet IMAGES du document, aussi une matrice (array), contient toutes les images du document HTML, (ex: images[0], images[1]...) dont l'attribut SRC qui nous permet de manipuler leur adresse physique et ainsi faire la rotation des bannières directement dans une seule balise <img> HTML.
<img src="" name="twban"...
// Mon image "twban" auquelle j'assigne une valeur de la matrice, en fonction de l'index.
document.images["twban"].src = aBannieres[nBanPos].src;
2. Pour ajouter au réalisme et à l'ergonomie de la chose, l'image elle-même (this) à un titre accessible et modifiable via l'attribut "title".
<imag src="" name="twban" title="Description ou titre"...
Après la capture du passage de la souris, j'assigne au titre une valeur de la matrice, en fonction de l'index.
<imag src="" name="twban" title="Description ou titre" onMouseOver="this.title=aBannieres[nBanPos].texte;"...
3. Quant au URL, c'est une propriété du document auquel j'assigne celui de la matrice, toujours en fonction de l'index.
document.location.href = aBannieres[nBanPos].url"
// Placé dans une balise ça donne :
<a href="javascript:document.location.href=aBannieres[nBanPos].url" onMouseOver="window.status=aBannieres[nBanPos].url; return true" onMouseOut="window.status=\'\';">');
Notez l'ajout de la gestion de la barre de statut, toujours pour respecter l'ergonomie. C'est plus intuitif de lire dans la barre de statut une adresse http qu'un bout de code Javascript!
Code complet :
<html>
<head>
<title>Bannières rotatives des Trucsweb</title>
<!-- 1. Configurer et placer dans l'en-tête du document (head). -->
<script type="text/javascript" language="javascript">
<!--
// Conception Django (Oznog) Blais
// 8 décembre 1997 - MAJ : 11 juin 2005
// Copyright © 2005 Trucsweb.com
// http://www.trucsweb.com
// Délais de la rotation
var nBanDelais = 10;
aBannieres = new Array();
// Bannières
aBannieres[0] = new twBanniere('http://www.trucsweb.com/','/images/image1.png','Titre 1');
aBannieres[1] = new twBanniere('http://www.google.com/','/images/image2.png','Titre 2');
aBannieres[2] = new twBanniere('http://www.w3c.org/','/images/image3.png','Titre 3');
// Ne pas modifier le code suivant
function twBanniere(_url,_src,_texte) {this.url=_url;this.src=_src;this.texte=_texte;}
function twRotation(){
nBanPos=(nBanPos<nBanMax-1)?nBanPos+1:0;
if (document.all){
document.images["twban"].style.filter="blendTrans(duration=2)";
document.images["twban"].style.filter="blendTrans(duration=CrossFadeDuration)";
document.images["twban"].filters.blendTrans.Apply();
}
document.images["twban"].src=aBannieres[nBanPos].src;
if (document.all) document.images["twban"].filters.blendTrans.Play();
oTimer = setTimeout('twRotation()',nBanDelais*1000);
}
var nBanPos = 0;
var oTimer;
var nBanMax = aBannieres.length;
// -->
</script>
</head>
<body>
<!-- 2. À copier à l'endroit où s'affichera la rotation des bannières. -->
<script type="text/javascript" language="javascript">
<!--
document.write('<a href="javascript:document.location.href=aBannieres[nBanPos].url" onMouseOver="window.status=aBannieres[nBanPos].url; return true" onMouseOut="window.status=\'\';">');
document.write('<img src="/images/image1.png" alt="Chargement..." name="twban" border="0" onMouseOver="this.title=aBannieres[nBanPos].texte;"/></a>');
twRotation();
// -->
</script>
</body>
</html>
| 
