Infobulle personnalisable (bordure, arrière plan, couleur des polices)
cs_masterpingouin
Messages postés
28
Date d'inscription
samedi 24 avril 2004
Statut
Membre
Dernière intervention
14 juillet 2006
-
25 mars 2005 à 19:41
GhislainLavoie Messages postés 289 Date d'inscription vendredi 11 mars 2005 Statut Membre Dernière intervention 3 avril 2008 - 25 mars 2005 à 21:33
GhislainLavoie Messages postés 289 Date d'inscription vendredi 11 mars 2005 Statut Membre Dernière intervention 3 avril 2008 - 25 mars 2005 à 21:33
1 réponse
GhislainLavoie
Messages postés
289
Date d'inscription
vendredi 11 mars 2005
Statut
Membre
Dernière intervention
3 avril 2008
3
25 mars 2005 à 21:33
25 mars 2005 à 21:33
Salut!
Je veux bien te proposé mon script d'info bulle.
bubble.js
<HR>
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('
');
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 = ''+message+'';
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";
}
<HR>
Un exemple d'utilisation :
<HR>
<html>
<head>
<title>Untitled</title>
</head>
<script type="text/javascript" src="bubble.js"></script>
<center>
http://msdn.microsoft.com/workshop/graphics/solarsys.gif" WIDTH=504 HEIGHT=126 BORDER=0 USEMAP="#SystemMap">
</center>
<MAP NAME="SystemMap">
</MAP>
</html>
<HR>
Tu pouras en changer le look de la bulle en modifiant le CSS .message incluent dans le script (1 ere ligne)
A+, Ghislain
Je veux bien te proposé mon script d'info bulle.
bubble.js
<HR>
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('
');
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 = ''+message+'';
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";
}
<HR>
Un exemple d'utilisation :
<HR>
<html>
<head>
<title>Untitled</title>
</head>
<script type="text/javascript" src="bubble.js"></script>
<center>
http://msdn.microsoft.com/workshop/graphics/solarsys.gif" WIDTH=504 HEIGHT=126 BORDER=0 USEMAP="#SystemMap">
</center>
<MAP NAME="SystemMap">
</MAP>
</html>
<HR>
Tu pouras en changer le look de la bulle en modifiant le CSS .message incluent dans le script (1 ere ligne)
A+, Ghislain