Code Javascript lié au passage de la souris ?

Résolu
rgdu86 Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   -  
 zanzan -
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 Messages postés 2274 Statut Membre 149
     
    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
  2. rgdu86 Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   65
     
    OK merci je vais essayer et vous tiens au courant.

    Cordialement.

    R.G.
    0
  3. rgdu86 Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   65
     
    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 Messages postés 2274 Statut Membre 149
       
      cf: [...]
      0
  4. rgdu86 Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   65
     
    Merci bien et bonne journée à tous.

    Cordialement.

    R.G.
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. rgdu86 Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   65
     
    C'est parfait, c'est ce qu'il me fallait

    Cordialement.

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

      Bonne prog !! ^^
      0
  7. rgdu86 Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   65
     
    C'est sûr que c'est simple et efficace.

    Merci à toi aussi.

    Cordialement.

    R.G.
    0
    1. Pi_Xi Messages postés 2274 Statut Membre 149
       
      >> "Merci à toi aussi"

      Mdr, y'a que toi et moi sur ce sujet pour l'instant ;o)
      0
      1. zanzan > Pi_Xi Messages postés 2274 Statut Membre
         
        Je 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 -
Thibaut -

3 réponses