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. 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.
    0
    1. rgdu86 Auteur
      OK merci je vais essayer et vous tiens au courant.

      Cordialement.

      R.G.
      0
      1. 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.
        0
        1. Pi_Xi
          cf: [...]
          0
      2. rgdu86 Auteur
        Merci bien et bonne journée à tous.

        Cordialement.

        R.G.
        0
        2. rgdu86 Auteur
          C'est parfait, c'est ce qu'il me fallait

          Cordialement.

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

            Bonne prog !! ^^
            0
        3. rgdu86 Auteur
          C'est sûr que c'est simple et efficace.

          Merci à toi aussi.

          Cordialement.

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

            Mdr, y'a que toi et moi sur ce sujet pour l'instant ;o)
            0
          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...
            0

        Discussions similaires

        java script error in the main process
        ceciel2307

        3 réponses