Je cherche un script

Je cherche un script permettant qu'au passage de la sours apparaisse une bulle sur le lien(image ou bannière) pointé dans laquelle je puisse inscrire le texte voulu...Merci d'avance.Yen17 pour www.gregorio.fr.st

2 réponses

  • Votes
  • Date
  • Date décroissante
  1. Il faut utiliser les onMouseOver et les Layers... Y'a un script OverLib.js qui fait ça. Fais une recherche sur google.fr
    Il doit y en avoir pleins d'autres sur les sites javascript.

    -= Bobinours =-
    1. Salut yen17

      Voici l'intégralité d'un des scripts que j'ai fait à partir de scripts trouvés sur le net : je réalisé une adaptation pour utiliser des objets JavaScript. C'est mieux, c'est comptatible IE/NS (à tester qd même !). Le but m'afranchir au maximum des différences entres les 2 navigateurs et utiliser des méthodes génériques.

      Voici le code (il est un peu long je sais ...) :

      <HTML>
      <HEAD>
      <TITLE>Test de survol de la souris ...</TITLE>
      <STYLE>
      .abs {position:absolute; left:-5000px;}
      </STYLE>

      <SCRIPT language="JavaScript">
      <!--

      // Les objets pour NS

      // Objet pour souris format NS
      function NS_mouse()
      {
      this.x=0;
      this.y=0;
      }

      // Convertions les coordonnées relatives de la souris en coordonnées absolues
      function NS_mouse_setXY(event_object)
      {
      this.x=event_object.pageX;
      this.y=event_object.pageY;
      }
      NS_mouse.prototype.setXY=NS_mouse_setXY;

      // Créer un objet qui va stocker une référence sur le tag <DIV>
      function NS_divTag(id)
      {
      this.id=id;
      }

      function NS_divTag_init(id)
      {
      // Initialisation de la référence du tag <DIV>
      this.ref=((id) && (window.document.layers[id])) ? window.document.layers[id]:null;
      }
      NS_divTag.prototype.init=NS_divTag_init;

      // Positionne le tag <DIV> horizontalement à X
      function NS_divTag_setX(x)
      {
      return (this.ref.left=x);
      }
      NS_divTag.prototype.setX=NS_divTag_setX;

      // Positionne le tag <DIV> verticalement à Y
      function NS_divTag_setY(y)
      {
      return (this.ref.top=y);
      }
      NS_divTag.prototype.setY=NS_divTag_setY;

      // Les objets pour IE

      // Objet pour souris
      function IE_mouse()
      {
      this.x=0;
      this.y=0;
      }

      // Convertions les coordonnées relatives de la souris en coordonnées absolues
      function IE_mouse_setXY(event_object)
      {
      this.x=document.body.scrollLeft+event_object.clientX;
      this.y=document.body.scrollTop+event_object.clientY;
      }
      IE_mouse.prototype.setXY=IE_mouse_setXY;

      function IE_divTag(id)
      {
      this.id=id; // On conserve l'id
      }

      function IE_divTag_init(id)
      {
      // Initialisation de la référence du tag <DIV>
      this.ref=((id) && (document.all[id])) ? document.all[id] : null;
      }
      IE_divTag.prototype.init=IE_divTag_init;

      // Positionne le tag <DIV> horizontalement à X
      function IE_divTag_setX(x)
      {
      return (this.ref.style.pixelLeft=x);
      }
      IE_divTag.prototype.setX=IE_divTag_setX;

      // Positionne le tag <DIV> verticalement à Y
      function IE_divTag_setY(y)
      {
      return (this.ref.style.pixelTop=y);
      }
      IE_divTag.prototype.setY=IE_divTag_setY;

      // Les objets communs
      function Mouse()
      {
      }

      function DivTag(id,dX,dY)
      {
      this.x=0;
      this.y=0;
      this.dX=dX || 0;
      this.dY=dY || 0;
      this.init(id); //Initialise this.ref ...
      }

      // C'est ici qu'est le truc :
      // DivTag descend d'un objet différent selon le type de navigateur
      // Idem pour Mouse
      if (document.all)
      {
      DivTag.prototype=new IE_divTag();
      Mouse.prototype=new IE_mouse();

      }
      else
      {
      DivTag.prototype=new NS_divTag();
      Mouse.prototype=new NS_mouse();
      }

      // Créé un objet mouse dont le but est de stocker/convertir la position de la souris
      var mouse=new Mouse();

      // Déplace le divTag à la position de la souris ...
      function divTag_moveTo(mouse_event)
      {
      // Convertion des coordonnées relatives de la souris en coordonnées absolues

      mouse.setXY(mouse_event);
      this.x=mouse.x+this.dX;
      this.y=mouse.y+this.dY;
      this.setX(this.x);
      this.setY(this.y);
      }
      DivTag.prototype.moveTo=divTag_moveTo;

      // Cache le tag en la placant hors de l'écran : efficace !
      function divTag_hide()
      {
      this.x=-5000;
      this.setX(this.x);
      }
      DivTag.prototype.hide=divTag_hide;

      function load()
      {
      // Déclaration des objets info-bulles
      // Un tableau n'est pas obligatore !
      bulle=new Array();
      bulle[0]=new DivTag("bulle1",10,20);
      bulle[1]=new DivTag("bulle2",10,20);
      }

      // -->
      </SCRIPT>
      </HEAD>
      <BODY ONLOAD="load()">
      <a onmouseover="bulle[0].moveTo(event)"
      onmouseout="bulle[0].hide()"
      href="javascript:void(0)">Passer la souris sur ce lien pour voir l'info-bulle n°1</A>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <a onmouseover="bulle[1].moveTo(event)"
      onmouseout="bulle[1].hide()"
      href="javascript:void(0)">Passer la souris sur ce lien pour voir l'info-bulle n°2</A>

      <div id=bulle1 class=abs>
      <table>
      <tr>
      <td bgcolor="#FFFF00"><p color=#0000FF>Et voici l'info-bulle n°1 ...</p></td>
      </tr>
      </table>
      </div>

      <div id=bulle2 class=abs>
      <table>
      <tr>
      <td bgcolor="#FFF010"><p color=#0000FF><b>Et l'info-bulle n°2 ... + gras</b></p></td>
      </tr>
      </table>
      </div>
      </BODY>
      </HTML>

      Et voilà ...

      @+
      Philippe