Rendre l'infobulle cliquable

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Rendre l'infobulle cliquable

Message par SunMee le Ven 4 Juin 2010 - 1:55

bonsoir ^_^

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

Merci d'avance


Dernière édition par SunMee le Ven 4 Juin 2010 - 2:56, édité 3 fois

SunMee
*

Féminin
Messages : 30
Inscrit(e) le : 27/05/2010

http://golden-temptation.forumactif.org/
SunMee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Rendre l'infobulle cliquable

Message par Somewhere le Ven 4 Juin 2010 - 1:57

Bonsoir Wink

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

Cordialement, Somewhere.

Somewhere
*****

Masculin
Messages : 747
Inscrit(e) le : 09/12/2007

http://some-where.deviantart.com/
Somewhere a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Rendre l'infobulle cliquable

Message par SunMee le Ven 4 Juin 2010 - 1:58

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

SunMee
*

Féminin
Messages : 30
Inscrit(e) le : 27/05/2010

http://golden-temptation.forumactif.org/
SunMee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Rendre l'infobulle cliquable

Message par Somewhere le Ven 4 Juin 2010 - 2:00

D'accord =)

Alors il suffit tout simplement d'utiliser ce code :

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

Somewhere Wink

Somewhere
*****

Masculin
Messages : 747
Inscrit(e) le : 09/12/2007

http://some-where.deviantart.com/
Somewhere a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Rendre l'infobulle cliquable

Message par SunMee le Ven 4 Juin 2010 - 2:06

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

SunMee
*

Féminin
Messages : 30
Inscrit(e) le : 27/05/2010

http://golden-temptation.forumactif.org/
SunMee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Rendre l'infobulle cliquable

Message par Somewhere le Ven 4 Juin 2010 - 2:20

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

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

Somewhere Wink

Somewhere
*****

Masculin
Messages : 747
Inscrit(e) le : 09/12/2007

http://some-where.deviantart.com/
Somewhere a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Rendre l'infobulle cliquable

Message par SunMee le Ven 4 Juin 2010 - 2:29

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;
}

SunMee
*

Féminin
Messages : 30
Inscrit(e) le : 27/05/2010

http://golden-temptation.forumactif.org/
SunMee a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Rendre l'infobulle cliquable

Message par Somewhere le Ven 4 Juin 2010 - 2:35

Alors alors Wink

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 Mr. Green

Somewhere
*****

Masculin
Messages : 747
Inscrit(e) le : 09/12/2007

http://some-where.deviantart.com/
Somewhere a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Rendre l'infobulle cliquable

Message par SunMee le Ven 4 Juin 2010 - 2:44

Merci beaucoup ^_^

SunMee
*

Féminin
Messages : 30
Inscrit(e) le : 27/05/2010

http://golden-temptation.forumactif.org/
SunMee a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum