Code Javascript lié au passage de la souris ?

Résolu
rgdu86 -  
Bonjour à tous,

Jaimerais savoir comment coder en javascript pour que quand je passe ma souris sur une partie de texte ou une image il y ait une pseudo fenêtre qui s'ouvre et affiche certaines informations, comme il y a sur ce site. Quand vous passer votre souris sur les sujets en cours ou résolus, il y a d'écrit "Discussion terminée", "Sujet en cours" ou "Question sans réponse".

Par avance, merci a ceux qui prendront la peine de me répondre.

Cordialement.

R.G.
--
Tout vient à point à qui sait attendre
Configuration: Windows XP
Firefox 2.0.0.11

6 réponses

  1.  rgdu86 Auteur
    C'est sûr que c'est simple et efficace.

    Merci à toi aussi.

    Cordialement.

    R.G.
    1. Pi_Xi
      >> "Merci à toi aussi"

      Mdr, y'a que toi et moi sur ce sujet pour l'instant ;o)
    2. zanzan
      @Pi_XiJe propose même une petite modif de ce code:
      dans "a:hover.info span { }"
      remplacer "position: absolute;"
      par "position: fixed;"
      Cela permettra de voir le span ou que soit le visiteur dans la page...
  2. rgdu86 Auteur
    C'est parfait, c'est ce qu'il me fallait

    Cordialement.

    R.G.
    1. Pi_Xi
      de rien, c'est mon code préféré pour les infobulles ^^ Simple et efficace :o)

      Bonne prog !! ^^
  4. rgdu86 Auteur
    Mais ton CSS tu le mets où ?

    Et puis je n'ais pas très bien compris la ligne :

    <a href="#" class="info">survolez ce lien... <span>infobulle</span></a>

    Peux-tu m'expliquer, s'il te plaît ?

    Par avance, merci

    Cordialement.

    R.G.
  6. rgdu86 Auteur
    OK merci je vais essayer et vous tiens au courant.

    Cordialement.

    R.G.
    1. Pi_Xi
      Bonjour,

      ça peut se faire en CSS:
      a.info {
  position:relative;
  text-decoration: none; 
}

a:hover.info {
  text-decoration: underline;
  background: none;
}

a.info span {display: none;}

a:hover.info span {
  display: inline;
  position: absolute; 
  top:1.5em;
  left:0.5em;
  z-index: 20;
  background: #6586C5;
  color: #fff;
  border:1px solid #666;
  width:150px;
  text-align:center;
  font-weight:normal;
  font-size: 10px;
  line-height:12px;
  padding:2px 4px;
}

...

<a href="#" class="info">survolez ce lien... <span>infobulle</span></a>
      Je l'avais fait aussi en JS y'a qq années, mais à la bourrin et je t'épargne le code, très lourd pour ce que c'est.

      Y'a aussi cette méthode qui utilise la propriété onMouseOver: http://damienalexandre.fr/Info-Bulle-en-Javascript.html

      et d'autres encore.

      Discussions similaires

      java script error in the main process
      ceciel2307

      3 réponses