Rendre l'infobulle cliquable

[SunMee]

bonsoir ^_^

Tout est dans le titre...j'aimerais juste savoir comment rendre mon infobulle cliquable s'il vous plait ^_^

Merci d'avance

[Somewhere]

Bonsoir

C'est à dire ? Auriez-vous un exemple précis de l'effet souhaité ?

Cordialement, Somewhere.

[SunMee]

et bien je voudrais juste que lorsqu'on passe la souris sur l'image et que l'infobulle apparait, qu'on puisse cliquer sur les liens dans l'infobulle

[Somewhere]

D'accord =)

Alors il suffit tout simplement d'utiliser ce code :

Code:

<a href="http://votre_adresse.com">Blablabla</a>

Somewhere

[SunMee]

oui j'ai fait ça...mais mon infobulle elle disparait dès que la souris à quitté l'image et on ne peux pas cliquer sur les liens

[Somewhere]

Effectivement, je viens de voir ça sur le forum de ton profil =)

Je vois où est situé le problème Peux-tu me donner le css correspondant à ton infobulle afin de t'aider à le corriger ?

Somewhere

[SunMee]

voilà:

Code:

a.imginfo {
  position: relative;
  color: #7d7d7d;
  text-decoration: none;
  border-bottom: 0px #7d7d7d solid; /* on souligne le texte */
}

a.imginfo span {
  display: none; /* on masque l'infobulle */
}
a.imginfo:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
  cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.imginfo:hover span {
  display: inline; /* on affiche l'infobulle */
  position: absolute;
  white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
  top: 30px; /* on positionne notre infobulle */
  left: 20px;
  background: white;
  color: 7d7d7d;
  padding: 3px;
  border: 0px solid grey;
  border-left: 5px solid #b6b6b6;
  border-right: 3px solid #b6b6b6;
  border-top: 3px solid #b6b6b6;
  border-bottom: 5px solid #b6b6b6;
}

[Somewhere]

Alors alors

Modifie ça :

Code:

a.imginfo:hover span {
  display: inline; /* on affiche l'infobulle */
  position: absolute;
  white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
  top: 30px; /* on positionne notre infobulle */
  left: 20px;
  background: white;
  color: 7d7d7d;
  padding: 3px;
  border: 0px solid grey;
  border-left: 5px solid #b6b6b6;
  border-right: 3px solid #b6b6b6;
  border-top: 3px solid #b6b6b6;
  border-bottom: 5px solid #b6b6b6;
}

par ceci :

Code:

a.imginfo:hover span {
  display: inline; /* on affiche l'infobulle */
  position: absolute;
  white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
  top: 20px; /* on positionne notre infobulle */
  left: 20px;
  background: white;
  color: 7d7d7d;
  padding: 3px;
  border: 0px solid grey;
  border-left: 5px solid #b6b6b6;
  border-right: 3px solid #b6b6b6;
  border-top: 3px solid #b6b6b6;
  border-bottom: 5px solid #b6b6b6;
}

C'est la position top qui est trop élevée ^^ Là, j'ai mis 20px mais si ce n'est toujours pas bon, modifie la valeur toi-même en mettant quelque chose d'inférieur. Et normalement, ta souris pourra voler au dessus de ton infobulle sans la quitter et tu pourras cliquer sur tes liens ^^

Voili voilou

[SunMee]

Merci beaucoup ^_^