| youdontcare |
pour du html / js, tu peux bien te débrouiller en cherchant un minimum. tu prends le html, t'enlèves des trucs jusqu'à ce que ça marche plus, tu remets (undo) le dernier truc que tu as enlevé. tu fais ça sur toute la source, par bouts de 40 lignes par ex.
//
pour ton problème :
c'est un élément html (un div, un span, n'importe quoi) en position absolue. il est nommé pour qu'il puisse être manipulé.
<div id='toolTip' style='position: absolute'>mon texte tooltip</div>
maintenant, il faut deux choses :
1) par défaut, le cacher. le rendre visible lorsqu'il passe sur l'élément qui le génère, le rendre invisible lorsqu'il quitte l'élément.
2) lui faire suivre les coordonnées de la souris lorsque le curseur passe sur l'élément qui génère le tooltip.
pour le 1), on utilise les événement onmouseover et onmouseout de l'élément qui génère le tooltip pour l'afficher / le masquer.
onmouseover="toolTip.style.visibility = 'visible'";
onmouseout="toolTip.style.visibility = 'hidden'";
pour le 2), on utilise l'événement mousemove qui reçoit en paramètre les coords de la souris.
onmousemove="updateToolTip()"
function updateToolTip()
{
toolTip.style.left = event.x;
toolTip.style.top = event.y;
}
//
dans ton exemple, ton tooltip a l'air d'être une table. on n'utilise donc pas un <div> mais une <table>, qui contient deux éléments modifiables : le titre et le contenu.
<table id='toolTip' width='200' style='position: absolute; visibility: hidden; background-color: rgb(255, 0, 0)'>
<tr><td id='toolTipTitle' style='background-color: rgb(0, 255, 0)'></td></tr>
<tr><td id='toolTipBody'></td></tr>
</table>
sur chaque icône :
<img src='....tonimage.jpeg'
onmouseover="showToolTip('titre de cette icône', 'contenu de cette icône')"
onmouseout="hideToolTip()"
onmousemove="updateToolTip()"
>
<script>
function showToolTip(t, b)
{
toolTipTitle.innerHTML = t;
toolTipBody.innerHTML = b;
toolTip.style.visibility = 'visible';
toolTip.style.left = event.x;
toolTip.style.top = event.y;
}
function hideToolTip()
{
toolTip.style.visibility = 'hidden';
}
function updateToolTip()
{
toolTip.style.left = event.x;
toolTip.style.top = event.y;
}
</script>
//
ça marchera sous ie. pour netscape, tu remplaces les affectations directes par un document.getElementById() :
au lieu de
toolTip.style.left = event.x;
c'est
document.getElementById('toolTip').style.left = event.x;
il faut également capturer les événements souris, je ne me souviens plus de la syntaxe. [jfdsdjhfuetppo]--Message édité par youdontcare--[/jfdsdjhfuetppo] |
