Je t'invite à examiner ce petit source que j'ai concocté pour toi. Il est certes perfectible, mais il a le mérite de fonctionner du moins sous IE8 et Firefox 3.6.17 (autres navigateurs non testés). L'infobulle disparaît automatiquement après un laps de temps préétabli, mais modifiable. Le style de l'infobulle est aussi modifiable et l'utilisation de html est autorisée pour son contenu.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>infobulle sur option</title>
<script type="text/javascript">
/*== source : lddsoft ==*/
// Texte des infobulles
var infobul = new Array();
infobul[1]= "Infobulle pour l'<span style='color:red;font-weight:bold'>Option 1<\/span>"; // html permis pour le contenu de l'infobulle
infobul[2]= "Infobulle pour l'Option 2";
infobul[3]= "Infobulle pour l'Option 3";
infobul[4]= "Infobulle pour l'Option 4";
function infoOption(opt){
montre(infobul[ opt]+"<p id='ok'><input type='button' value='Valider' onclick=\"alert('Votre choix [option "+opt+"] a été validé!');\">"+
"<input type='button' value='Annuler' onclick=\"cache();return false;\"><\/p>"+
"<div id='msgbulle'>Infobulle à fermeture automatique<\/div>");
var tempo = setTimeout("cache()",5000); // l'infobulle disparaît automatiquement après 5 secondes (modifiable)
}
/*== fin source : lddsoft ==*/
/*== source : http://damienalexandre.fr/Info-Bulle-en-Javascript.html, modifié par lddsoft ==*/
var i=false;
function montre(text){
// connaître la position du select "selection"
var gauche = getPos(document.getElementById('selection')).l;
var haut = getPos(document.getElementById('selection')).t;
var curs = document.getElementById('bulle');
curs.style.left=(gauche+20)+"px";
curs.style.top=(haut+20)+"px";
if(i==false) {
curs.style.visibility="visible";
curs.innerHTML = text;
i=true;
}
}
function cache() {
if(i==true) {
document.getElementById('bulle').style.visibility="hidden";
i=false;
}
}
/*== source : http://damienalexandre.fr/Info-Bulle-en-Javascript.html ==*/
/*== source : http://webbricks.org/bricks/getPos/ ==*/
var getPos = function (elem) {
var pos={'r':0,'l':0,'t':0,'b':0};
var tmp=elem;
do {
pos.l += tmp.offsetLeft;
tmp = tmp.offsetParent;
} while( tmp !== null );
pos.r = pos.l + elem.offsetWidth;
tmp=elem;
do {
pos.t += tmp.offsetTop;
tmp = tmp.offsetParent;
} while( tmp !== null );
pos.b = pos.t + elem.offsetHeight;
return pos;
};
/*== fin source : http://webbricks.org/bricks/getPos/ ==*/
</script>
<style type="text/css">
#frm {
width:300px;
margin:100px auto 0 auto;
}
#selection{
width:300px;
font: normal 16px arial,verdana,helvetica;
color: blue;
background: #ffff33
}
.titreopt{text-align:center;background:#ccc}
.infobulle{
position: absolute;
visibility : hidden;
border: 1px solid Black;
padding: 10px;
font: normal 12px arial,verdana,helvetica;
background-color: #FFFFCC;
}
#msgbulle{
font:italic 10px arial,verdana,helvetica;
background: #ccc;
text-align:center;
color:#fff;
padding:0 2px;
margin: 10px -10px -10px -10px;
}
#ok {text-align:center}
</style>
</head>
<body>
<div id="bulle" class="infobulle"></div>
<form action="#" id="frm">
<select id="selection" onchange="infoOption(this.selectedIndex);" size="3">
<option value="" class="titreopt">- Options -</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
</form>
</body>
</html>
Modifié par lddsoft (22 May 2011 - 18:23)