Code Javascript lié au passage de la souris ?

Résolu

rgdu86 Messages postés 275 Date d'inscription Statut Membre Dernière intervention -
zanzan - 28 juin 2008 à 10:31

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.

A voir également:

Code Javascript lié au passage de la souris ?
Code ascii - Guide
Quelle touche pour débloquer la souris ? - Guide
Code de déverrouillage oublié - Guide
Code puk bloqué - Guide
Code activation windows 10 - Guide

6 réponses

Réponse 1 / 6

Pi_Xi Messages postés 2244 Date d'inscription Statut Membre Dernière intervention 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.

Réponse 2 / 6