Sujet Précédent Sujet Suivant

Code Javascript lié au passage de la souris ?

Résolu/Fermé
rgdu86 Messages postés 275 Date d'inscription mercredi 23 mai 2007 Statut Membre Dernière intervention 7 juillet 2014 - 17 janv. 2008 à 13:41
 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:

6 réponses

Réponse 1 / 6
Pi_Xi Messages postés 2244 Date d'inscription samedi 24 mars 2007 Statut Membre Dernière intervention 22 janvier 2016 149
17 janv. 2008 à 13:45
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
Réponse 2 / 6
rgdu86 Messages postés 275 Date d'inscription mercredi 23 mai 2007 Statut Membre Dernière intervention 7 juillet 2014 65
17 janv. 2008 à 13:46
OK merci je vais essayer et vous tiens au courant.

Cordialement.

R.G.
0
Réponse 3 / 6
rgdu86 Messages postés 275 Date d'inscription mercredi 23 mai 2007 Statut Membre Dernière intervention 7 juillet 2014 65
17 janv. 2008 à 13:54
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
Pi_Xi Messages postés 2244 Date d'inscription samedi 24 mars 2007 Statut Membre Dernière intervention 22 janvier 2016 149
Modifié le 17 janv. 2008 à 14:17
cf: [...]
0
Réponse 4 / 6
rgdu86 Messages postés 275 Date d'inscription mercredi 23 mai 2007 Statut Membre Dernière intervention 7 juillet 2014 65
17 janv. 2008 à 14:00
Merci bien et bonne journée à tous.

Cordialement.

R.G.
0

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

Posez votre question
Réponse 5 / 6
rgdu86 Messages postés 275 Date d'inscription mercredi 23 mai 2007 Statut Membre Dernière intervention 7 juillet 2014 65
17 janv. 2008 à 14:07
C'est parfait, c'est ce qu'il me fallait

Cordialement.

R.G.
0
Pi_Xi Messages postés 2244 Date d'inscription samedi 24 mars 2007 Statut Membre Dernière intervention 22 janvier 2016 149
17 janv. 2008 à 14:10
de rien, c'est mon code préféré pour les infobulles ^^ Simple et efficace :o)

Bonne prog !! ^^
0
Réponse 6 / 6
rgdu86 Messages postés 275 Date d'inscription mercredi 23 mai 2007 Statut Membre Dernière intervention 7 juillet 2014 65
17 janv. 2008 à 14:14
C'est sûr que c'est simple et efficace.

Merci à toi aussi.

Cordialement.

R.G.
0
Pi_Xi Messages postés 2244 Date d'inscription samedi 24 mars 2007 Statut Membre Dernière intervention 22 janvier 2016 149
17 janv. 2008 à 14:17
>> "Merci à toi aussi"

Mdr, y'a que toi et moi sur ce sujet pour l'instant ;o)
0
zanzan > Pi_Xi Messages postés 2244 Date d'inscription samedi 24 mars 2007 Statut Membre Dernière intervention 22 janvier 2016
28 juin 2008 à 10:31
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

Code de renvoi d'appel : Ooredo, Mobilis...
midoou07 -
Camille -

13 réponses
[référencement] Ne pas être référencé
kij_82 -
Searaphina -

10 réponses
Comment changer le sens de la souris avec un double écran ?
Sviet531 -
Yt_mando -

51 réponses
Acces à snapchat temporairement désactivé
Anto_1234 -
M2 -

87 réponses