14-08-2006, 05:40 PM
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 :
dw_tooltip.js :
dw_viewport.js :
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 :
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> :
Puis créer une variable qui sera le texte de l'info bulle (vous pouvez en mettre plusieurs) :
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 :
Bien, il ne nous reste plus qu'à l'activer au survol d'un élément ... Pour l'exemple, ce sera une image :
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.
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;
}
}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();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();
}
}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 }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>Code :
<script type="text/javascript">
var tool_test='<b>Coucou</b><br>Ceci est l'info.';
</script>Ensuite, il faut l'initialiser au début de la page, en modifiant la balise <body> comme suit :
Code :
<body onLoad="Tooltip.init();">Code :
<img src="image.gif" onMouseOver="doTooltip(event,tool_test)" onMouseOut="hideTip()">
Placeholder
