- · Niveau : DÉBUTANT
- · Compatibilité : IE 4+ Netscape 3+
- · Voir l’exemple
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
<!DOCTYPE html>
<html lang="fr-CA">
<head>
<meta charset="utf-8">
<title>Bannières rotatives des Trucsweb</title>
<script type="text/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/","http://trucsweb.com/images/ban-ue.png","Titre 1");
aBannieres[1] = new twBanniere("http://www.google.com/","http://neural3.com/images/pub_neural3-3.jpg","Titre 2");
aBannieres[2] = new twBanniere("http://www.w3c.org/","http://trucsweb.com/images/ban-forum.jpg","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>
<a href="javascript:document.location.href=aBannieres[nBanPos].url" onMouseOver="window.status=aBannieres[nBanPos].url; return true" onMouseOut="window.status=’’;">
<img src="http://trucsweb.com/images/ban-ue.png" alt="Chargement..." style="width:300px" name="twban" border="0" onMouseOver="this.title=aBannieres[nBanPos].texte;"/></a>
<script type="text/javascript" language="javascript">
<!--
twRotation();
// -->
</script>
</body>
</html>
![[Photo]](https://www.trucsweb.com/documents/images/2024/js-bs-formulaire-fetch.png)
Formulaire Bootstrap 5 Ajax avec validation.![[Photo]](https://www.trucsweb.com/documents/images/2023/elephants-Salvador_Dali_1948.jpg)
Sécuriser l’accès « bureau à distance » sous IIS![[Photo]](https://www.trucsweb.com/documents/images/2023/trou_noir_galaxie_M87.jpg)
L’AI au temps du Far-Web![[Photo]](https://www.trucsweb.com/documents/images/2023/gilles-villeneuve-montreal1978.jpg)
Sélecteurs JavaScript querySelector() et querySelectorAll()![[Photo]](http://www.trucsweb.com/documents/images/2023/evolution_de_lhomme.jpg)
CSS - Animations![[Photo]](http://www.trucsweb.com/documents/images/2023/univers-copernic.jpg)
Mode de couleurs (Color modes) Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/2023/les_burgers_de_papa.jpg)
25 ans des Trucsweb - Bouton hamburger animé Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/logos/l_whatwg.svg)
Living Standard pour HTML de Apple, Google, Mozilla, Microsoft ...et la W3C![[Photo]](http://www.trucsweb.com/documents/images/2022/tim-berners-lee-web-b.jpg)
Le nouveau HTML « Living Standard » et le XML![[Photo]](http://www.trucsweb.com/documents/images/2022/v_jacques_dutronc-les_cactus.jpg)
Sécuriser un formulaire de contact au Far-Web!![[Photo]](http://www.trucsweb.com/documents/images/2021/Oblomov-paresseux.jpg)
AbuseIPDB
Connexion