Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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.
avatar

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
avatar

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
avatar

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
avatar

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