Lien HTML dans une infobulle

[horusbk]

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

[MlleAlys]

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 */
}

[horusbk]

Merci beaucoup pour votre aide MlleAlys
Je passe en