Trucsweb.com

Javascript

Les images

RDFFav

Bannières rotatives - Bannières avec liens

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)...bannières rotatives liens url délais images parseInt navigator.appversion new array() window.settimeout document.images src parent.corps.location window.open onLoad onmouseover window.status

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> 
  
Django (Oznog) Blais
Dernière mise à jour :

Commentaires

  • Monsieur, Votre script est disons le, très agréable à voir. je souhaiterais pouvoir adapter ce script sur mon site, je dispose de 3 bannières au format 468x60. Me faut-il un dossier particulier pour le chargement des images de mes bannières au format .jpg J'ai fait un essai que j'ai supprimé car les photos n'été pas visible J'ai pour l'essai, remplacer les urls et urls images ainsi que les Titre 1, 2,3 par par les titres des sites concernés et en parti verte j'ai agrandi la valeur Width à 468. il est bien évident que je placerais le nom de l'auteur sous le script Vous remerciant d'avance de vos efforts Cordialement Votre Philippe Hautecouverture
    64x64
    Hautecouverture Philippe
    http://www.phdevelop-annuaire-mecanique.com
    2015-02-07 18:1:41
    • L'image peut être dans le même dossier (ou ailleurs), pourvu que les URL soient valides. Attention aux guillemets dans le titre. Sinon, fait voir ton code. Ciao
      64x64
      oznog
      http://www.trucsweb.com
      2015-02-08 5:44:17


    • Bonjour, J'ai bien placé votre code et ça fonctionne... Par contre, j'aimerais savoir comment faire pour qu'il fonctionne avec une deuxième div ou même une troisième sur la même page ? J'ai essayé de coller votre code dans une deuxième div et il n'y en a qu'une qui marche... D'avance, merci
      64x64
      Rainart Raymond
      http://www.applications-mobiles-04.fr
      2015-07-15 8:26:16

      10/10 sur 1 revues.
             Visites : 4699 - Pages vues : 27652
      X

      Trucsweb.com Connexion

      Connexion

      X

      Trucsweb.com Mot de passe perdu

      Connexion

      X

      Trucsweb.com Conditions générales

      Conditions

      Responsabilité

      La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

      Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

      Droit applicable et juridiction compétente

      Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

      X

      Trucsweb.com Trucsweb

      X

      Trucsweb.com Glossaire

      X

      Trucsweb.com Trucsweb

      X

      Trucsweb.com Trucsweb

      Conditions

      Aucun message!

      Merci.

      X
      Aucun message!
      X

      Trucsweb.com Créer un compte

      Créer un compte

      .
      @