[html - javascript-...]

[html - javascript-...] - Programmation

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  :ange:

Reply

Marsh Posté le 28-03-2002 à 20:14:27   

Reply

Marsh Posté le 28-03-2002 à 20:20:43    

un ptit <div></div> :)

Reply

Marsh Posté le 29-03-2002 à 01:18:41    

Merci d'avoir essayer  :sarcastic:  
 
un tool tip text c http://kvl.itgo.com/tag2.gif
 
et en html il faut faire <img src="..." tag="Mon petit msg">
 
et je voudrais faire http://kvl.itgo.com/tag.gif
 
Merci de votre aide ...

 

[jfdsdjhfuetppo]--Message édité par kvl--[/jfdsdjhfuetppo]

Reply

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]

Reply

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!

Reply

Marsh Posté le 29-03-2002 à 12:20:51    

Merci à tous  :love:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed