Lien HTML dans une infobulle

2 participants

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

Résolu Lien HTML dans une infobulle

Message par horusbk Ven 17 Juin 2016 - 14:55

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Moi uniquement
Lien du forum : http://forumtest-horus.forumactif.org/

Description du problème

Bonjour,
Je suis en train de coder une signature pour un de mes forums. J'aimerais ajouter des liens à des infobulles qui seront placées sur ma signature. L'infobulle s'affiche au passage sur des images (il y en aura quatre dans ce cas).
Malheureusement, le lien ne veut pas s'intégrer à mon infobulle. Comme vous pouvez le voir sur l'aperçu ci-dessus, le lien est à part. J'aimerais l'avoir dans l'infobulle de cette manière (exemple de ce que j'aimerais avoir en infobulle) : voir ici
Pour ce faire voici le code HTML de l'infobulle où j'ai essayé de mettre mon lien.
Code:
 
      <a class="info"><img src="https://upload.wikimedia.org/wikipedia/fr/e/eb/Logo-forumactif.png.png"/><span>Pour ouvrir la page<a href="www.google.fr" target="_blank">Cliquez ici</a>.</span></a>
     
Et son code CSS :
Code:
a.info {
  position: relative;
  color: #576186;
  text-decoration: none;
}

a.info span {
  display: none; /* on masque l'infobulle */
font-size: 12px;

}
a.info:hover {
  background: none; /* correction d'un bug IE */
  z-index: 500; /* on définit une valeur pour l'ordre d'affichage */

  cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info: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: 60px; /* on positionne notre infobulle */
  left: 60px;

  background: #C0CDE5;

  color: #576186;
  padding: 3px;

  border: 3px solid #3E3D70;
}

Cordialement,
horusbk


Dernière édition par horusbk le Sam 18 Juin 2016 - 17:25, édité 1 fois
horusbk

horusbk
*****

Masculin
Messages : 625
Inscrit(e) le : 14/02/2015

http://horus.forumactif.com/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Lien HTML dans une infobulle

Message par MlleAlys Ven 17 Juin 2016 - 22:28

Bonjour,
ça ne fonctionne pas parce que la balise html pour un lien est une balise a, et vous avez utilisé la même pour votre infobulle, vous avez donc deux balises a imbriquées l'une dans l'autre, ce qui n'a aucun sens pour le navigateur.
Vous pouvez cependant modifier la balise de l'infobulle pour une autre que a, et utiliser des classes plutôt que la nature des éléments our pouvoir varier ceux ci sans souci, par exemple :

Code:
 
      <div class="info"><img src="https://upload.wikimedia.org/wikipedia/fr/e/eb/Logo-forumactif.png.png"/><span class="bulle">Pour ouvrir la page <a href="www.google.fr" target="_blank">Cliquez ici</a>.</span></div>
   

et du coup pour le css :
Code:
.info {
  position: relative;
  color: #576186;
  text-decoration: none;
}
 
.info .bulle {
  display: none; /* on masque l'infobulle */
  position: absolute;
  white-space: nowrap; /* pas de retour à la ligne non-désiré */
  top: 60px; /* on positionne notre infobulle */
  left: 60px;
  background: #C0CDE5;
  font-size: 12px;
  color: #576186;
  padding: 3px;
  border: 3px solid #3E3D70;
}

.info:hover {
  background: none; /* correction d'un bug IE */
  z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
  cursor: help; /* on change le curseur par défaut en curseur d'aide */
}

.info:hover .bulle {
  display: block; /* on affiche l'infobulle */
}
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Lien HTML dans une infobulle

Message par horusbk Sam 18 Juin 2016 - 17:25

Merci beaucoup pour votre aide MlleAlys Very Happy
Je passe en résolu
horusbk

horusbk
*****

Masculin
Messages : 625
Inscrit(e) le : 14/02/2015

http://horus.forumactif.com/
horusbk a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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