[html - javascript-...] - Programmation
Marsh Posté le 29-03-2002 à 01:18:41
Merci d'avoir essayer
un tool tip text c
et en html il faut faire <img src="..." tag="Mon petit msg">
et je voudrais faire
Merci de votre aide ...
[jfdsdjhfuetppo]--Message édité par kvl--[/jfdsdjhfuetppo]
Marsh Posté le 29-03-2002 à 01:57:44
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]
Marsh Posté le 29-03-2002 à 09:53:09
ceam a écrit a écrit : le script d'origine http://www.bosrup.com/web/overlib/ |
exactement...c bien cool d'ailleurs!
Marsh Posté le 28-03-2002 à 20:14:27
J'ai vu des "tags ou tool tip text" hyper beau pas jaunatres !!!... J'essaye de trouver comment faire ... Peut etre avec un css ...
Un petit lien pour vous montrer de quoi il retourne ...
C le type de tag présent sur la tool bar ou il y a les persos de Bd ...
http://www.a1javascripts.com/
Si vous savez avec quoi c fait javascript, css, java, vbs ...
Si vous avez un modele du script c encore plus top