Salut!
Je veux bien te proposé mon script d'info bulle.
bubble.js
document.write('<style>.message {FILTER: progid:DXImageTransform.Microsoft.Alpha( style=0,opacity=50);font-family:verdana;font-size:18px;color:#ffffff;width:200;height:20;background:#0000ff; }</style>');
document.write('<div style="position:absolute;display:none;z-index:20" id="alt"></div>');
objmove = document.onmousemove;
document.onmousemove = position;
obj = document.getElementById("alt");
function position(evenement)
{
if (objmove) objmove();
posx = document.all?event.x+document.body.scrollLeft:evenement.pageX;
posy = document.all?event.y+document.body.scrollTop:evenement.pageY;
topscroll = document.all?document.body.scrollTop:window.pageYOffset;
leftscroll = document.all?document.body.scrollLeft:window.pageXOffset;
hauteur_ecran = document.all?document.body.offsetHeight:window.innerHeight;
largeur_ecran = document.all?document.body.offsetWidth:window.innerWidth;
}
function voirmessage(message)
{
html = '<span class="message">'+message+'</span>';
document.getElementById('alt').innerHTML = html;
bouge = setTimeout("fairesuivre()",1)
}
function fairesuivre()
{
hauteur_layer = obj.offsetHeight;
largeur_layer = obj.offsetWidth;
if (posy-topscroll > (hauteur_ecran/2))
posiy = posy-hauteur_layer-15;
else
posiy = posy+25;
decalerL = posx-(largeur_layer/2)<0?posx-(largeur_layer/2)-25:0;
decalerR = posx+(largeur_layer/2)>largeur_ecran?posx+(largeur_layer/2)-largeur_ecran+25:0;
posix = (posx-(largeur_layer/2))-decalerL-decalerR;
obj.style.top = posiy;
obj.style.left = posix;
obj.style.display = "block";
bouge = setTimeout("fairesuivre()",5)
}
function killMessage()
{
clearTimeout(bouge);
obj.style.display = "none";
}
Un exemple d'utilisation :
<html>
<head>
<title>Untitled</title>
</head>
<body>
<script type="text/javascript" src="bubble.js"></script>
<center>
<P><IMG SRC="
[ Lien ]" WIDTH=504 HEIGHT=126 BORDER=0 USEMAP="#SystemMap">
</center>
<MAP NAME="SystemMap">
<AREA SHAPE="rect" COORDS="0,0,82,126" onmouseover="voirmessage('Soleil');" onmouseout="killMessage()">
<AREA SHAPE="circle" COORDS="90,58,3" onmouseover="voirmessage('Mercurel');" onmouseout="killMessage()" >
<AREA SHAPE="circle" COORDS="124,58,8" onmouseover="voirmessage('Venus');" onmouseout="killMessage()">
<AREA SHAPE="circle" COORDS="162,58,10" onmouseover="voirmessage('Terre');" onmouseout="killMessage()">
<AREA SHAPE="circle" COORDS="203,58,8" onmouseover="voirmessage('Mars');" onmouseout="killMessage()">
<AREA SHAPE="poly" COORDS="221,34,238,37,257,32,278,44,284,60,281,75,288,91,267,87,253,89,237,81,229,64,228,54" onmouseover="voirmessage('Jupiter');" onmouseout="killMessage()">
<AREA SHAPE="poly" COORDS="288,19,316,39,330,37,348,47,351,66,349,74,367,105,337,85,324,85,307,77,303,60,307,50" onmouseover="voirmessage('Saturn');" onmouseout="killMessage()">
<AREA SHAPE="poly" COORDS="405,39,408,50,411,57,410,71,404,78,393,80,383,86,381,75,376,69,376,56,380,48,393,44" onmouseover="voirmessage('Uranus');" onmouseout="killMessage()">
<AREA SHAPE="poly" COORDS="445,38,434,49,431,53,427,62,430,72,435,77,445,92,456,77,463,72,463,62,462,53,455,47" onmouseover="voirmessage('Neptune');" onmouseout="killMessage()">
<AREA SHAPE="circle" COORDS="479,66,3" onmouseover="voirmessage('Pluton');" onmouseout="killMessage()">
</MAP>
</body>
</html>
Tu pouras en changer le look de la bulle en modifiant le CSS .message incluent dans le script (1 ere ligne)
A+, Ghislain