Infos bulle personnalisées - Version imprimable

Infos bulle personnalisées - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Infos bulle personnalisées (/showthread.php?tid=37)

Infos bulle personnalisées - Shudrum - 14-08-2006

Bon, je remet ici un code Javascript complet pour les infos bulles. Quelques bugs ont été corrigés par rapport à la version originale ...

Désolé, je n'ai pas énormément commenté le code car il est complexe et je me suis perdu dedans :pleure2: ... Mais tous les commentaires essentiels seront présent ! (h)

Enjoy.

:main:

Mise en place :

Pour pouvoir avoir vos propres infos bulle, il vous faut un répertoire tooltip dans lequel sera stocké 3 fichiers javascript : dw_event.js, dw_tooltip.js et dw_viewport.js.

Voici le code des différents fichiers :

dw_event.js :

Code :
var dw_event = {

  add: function(obj, etype, fp, cap) {

    cap = cap || false;

    if (obj.addEventListener) obj.addEventListener(etype, fp, cap);

    else if (obj.attachEvent) obj.attachEvent("on" + etype, fp);

  }, 

  remove: function(obj, etype, fp, cap) {

    cap = cap || false;

    if (obj.removeEventListener) obj.removeEventListener(etype, fp, cap);

    else if (obj.detachEvent) obj.detachEvent("on" + etype, fp);

  }, 

  DOMit: function(e) { 

    e = e? e: window.event;

    e.tgt = e.srcElement? e.srcElement: e.target;

    if (!e.preventDefault) e.preventDefault = function () { return false; }

    if (!e.stopPropagation) e.stopPropagation = function () { if (window.event) window.event.cancelBubble = true; }

    return e;

  }

}

dw_tooltip.js :

Code :
var Tooltip = {

  followMouse: true,

  offX: 8,

  offY: 12,

  ready: false,

  t1: null,

  t2: null,

  tipID: "tipDiv",

  tip: null,

  init: function() {

    if ( document.createElement && document.body && typeof document.body.appendChild != "undefined" ) {

      var el = document.createElement("DIV");

      el.className = "tooltip";

      el.id = this.tipID;

      document.body.appendChild(el);

      this.ready = true;

    }

  },

  show: function(e, msg) {

    if (this.t1) clearTimeout(this.t1);    

      if (this.t2) clearTimeout(this.t2); 

    this.tip = document.getElementById( this.tipID );

      // set up mousemove 

      if (this.followMouse) 

      dw_event.add( document, "mousemove", this.trackMouse, true );

    this.writeTip("");  // for mac ie

    this.writeTip(msg);

    viewport.getAll();

    this.positionTip(e);

      this.t1 = setTimeout("document.getElementById('" + Tooltip.tipID + "').style.visibility = 'visible'",200);    

    },

    writeTip: function(msg) {

      if ( this.tip && typeof this.tip.innerHTML != "undefined" ) this.tip.innerHTML = msg;

    },

    positionTip: function(e) {

      var x = e.pageX? e.pageX: e.clientX + viewport.scrollX;

      var y = e.pageY? e.pageY: e.clientY + viewport.scrollY;

      if ( x + this.tip.offsetWidth + this.offX > viewport.width + viewport.scrollX )

        x = x - this.tip.offsetWidth - this.offX;

      else x = x + this.offX;

      if ( y + this.tip.offsetHeight + this.offY > viewport.height + viewport.scrollY )

        y = ( y - this.tip.offsetHeight - this.offY > viewport.scrollY )? y - this.tip.offsetHeight - this.offY : viewport.height + viewport.scrollY - this.tip.offsetHeight;

      else y = y + this.offY;

      this.tip.style.left = x + "px"; this.tip.style.top = y + "px";

    },

    hide: function() {

      if (this.t1) clearTimeout(this.t1);    

        if (this.t2) clearTimeout(this.t2); 

      this.t2 = setTimeout("document.getElementById('" + this.tipID + "').style.visibility = 'hidden'",200);

        // release mousemove

        if (this.followMouse) 

            dw_event.remove( document, "mousemove", this.trackMouse, true );

      this.tip = null;

    },

    trackMouse: function(e) {

        e = dw_event.DOMit(e);

         Tooltip.positionTip(e);    

    }

}

Tooltip.init();

dw_viewport.js :

Code :
var viewport = {

  getWinWidth: function () {

    this.width = 0;

    if (window.innerWidth) this.width = window.innerWidth - 18;

    else if (document.documentElement && document.documentElement.clientWidth) 

          this.width = document.documentElement.clientWidth;

    else if (document.body && document.body.clientWidth) 

          this.width = document.body.clientWidth;

  },

  getWinHeight: function () {

    this.height = 0;

    if (window.innerHeight) this.height = window.innerHeight - 18;

      else if (document.documentElement && document.documentElement.clientHeight) 

          this.height = document.documentElement.clientHeight;

      else if (document.body && document.body.clientHeight) 

          this.height = document.body.clientHeight;

  },

  getScrollX: function () {

    this.scrollX = 0;

      if (typeof window.pageXOffset == "number") this.scrollX = window.pageXOffset;

      else if (document.documentElement && document.documentElement.scrollLeft)

          this.scrollX = document.documentElement.scrollLeft;

      else if (document.body && document.body.scrollLeft) 

          this.scrollX = document.body.scrollLeft; 

      else if (window.scrollX) this.scrollX = window.scrollX;

  },

  getScrollY: function () {

    this.scrollY = 0;    

    if (typeof window.pageYOffset == "number") this.scrollY = window.pageYOffset;

    else if (document.documentElement && document.documentElement.scrollTop)

          this.scrollY = document.documentElement.scrollTop;

      else if (document.body && document.body.scrollTop) 

          this.scrollY = document.body.scrollTop; 

      else if (window.scrollY) this.scrollY = window.scrollY;

  },

  getAll: function () {

    this.getWinWidth(); this.getWinHeight();

    this.getScrollX();  this.getScrollY();

  }

}

Voilà, les trois fichiers sont prêts pour être utilisés. Il faut maintenant modifier votre fichier CSS ou le style de votre page en y incluant le code suivant :

Code :
div#tipDiv {

  position:absolute; visibility:hidden; left:10; top:0; z-index:10000;

  /* Ici vous choisissez la couleur et l'image de fond de l'info bulle */

  background:#000000 url('image.gif'); 

  border:0px solid #FFFFFF; 

  /* Ici vous choisissez la largeur de l'info bulle */

  width:250px; 

  padding:0px;

  /* Ici vous choisissez la couleur du texte */

  color:#FFFFFF; 

  font-size:12px

}

div.tp1 { font-size:12px; color:#FFFFFF; padding-top:5px }

Maintenant, on va modifier la page sur laquelle vous voulez les infos bulle.
Commencez par placer le code suivant après la balise <head></head> et avant la balise <body></body> :

Code :
<script src="tooltip/dw_event.js" type="text/javascript"></script>

<script src="tooltip/dw_viewport.js" type="text/javascript"></script>

<script src="tooltip/dw_tooltip.js" type="text/javascript"></script>

<script type="text/javascript">

function doTooltip(e, msg) {

    if ( typeof Tooltip == "undefined" || !Tooltip.ready ) return;

    Tooltip.show(e, msg);

}

function hideTip() {

    if ( typeof Tooltip == "undefined" || !Tooltip.ready ) return;

    Tooltip.hide();

}

</script>

Puis créer une variable qui sera le texte de l'info bulle (vous pouvez en mettre plusieurs) :

Code :
<script type="text/javascript">

var tool_test='<b>Coucou</b><br>Ceci est l'info.';

</script>

Notez que la variable est du texte en HTML, vous pouvez donc y mettre ce que vous voulez, images, fonds, tableaux, etc.

Ensuite, il faut l'initialiser au début de la page, en modifiant la balise <body> comme suit :

Code :
<body onLoad="Tooltip.init();">

Bien, il ne nous reste plus qu'à l'activer au survol d'un élément ... Pour l'exemple, ce sera une image :

Code :
<img src="image.gif" onMouseOver="doTooltip(event,tool_test)" onMouseOut="hideTip()">

Et voilà, notez que la variable du texte est présente dans la fonction doTooltip, et que vous la changerez pour ce que vous voudrez. Vous pouvez créer bien évidemment autant de variables que vous voulez.

RE: Infos bulle personnalisées - orditeck - 14-08-2006

L'aide pour ce script ce trouve à cette adresse :
http://www.jeuweb.org/board/showthread.php?tid=72