Création d'infobulle fixe

[Cheeralex]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : //
Lien du forum : http://western-bastards.forumactif.org/

Description du problème

Bonjour !

J'aimerai me lancer dans la création d'infobulle fixe, un peu comme des onglets donc mais au survol des images, le texte apparaît dans un cadre et quelque soit l'image survolé, le texte reste dans ce cadre. Je sais que cela est possible, cependant, j'ignore la procédure. J'ai déjà essayé de faire des infobulles avec une position: fixed, sans succès. De plus, j'aimerai éviter qu'en éditant ma page d'accueil, tout le code se détruise. Du coup, si quelqu'un peut m'aider à les construire, ça serait top. Surtout qu'idéalement, j'aimerai une transition assez sympathique pour chaque apparition de texte

Merci par avance pour votre aide ♥

[tupac]

Bonsoir Cheeralex,

Je pense avoir un exemple de ce que vous souhaitez.
En haut a gauche du forum, des modifications seront a faire selon vos besoins.

[Cheeralex]

Bonjour Tupac !
Au niveau de la transition pour l'apparition de l'infobulle, c'est dans ce genre-là, par contre... Idéalement, j'aimerai que l'infobulle ne suive pas les images que l'on survole mais qu'elle reste toujours au même endroit, genre dans un cadre en dessous des images. Est-ce que c'est faisable ? **

Merci d'avance ♥

edit : j'ai réussi à faire mes infobulles fixes o/ mais par contre j'aimerai bien réaliser une plus belle transition que l'apparition assez brutale du cadre blanc :/ Ainsi que... dès que j'actualise ma page, l'infobulle se retrouve plus bas de son emplacement initiale --' Est-ce qu'il manque quelque chose dedans pour qu'elle ne se barre pas dès que je modifie la page d'accueil ou que je touche au css ?

HTML

Code:

<center><a class="fobu"><img src="https://cdn1.iconfinder.com/data/icons/UltraBuuf/512/Thor.png" style="width: 20px;" /><span>farabriver</span></a> <a class="fobu"><img src="https://cdn1.iconfinder.com/data/icons/UltraBuuf/512/Thor.png" style="width: 20px;" /><span>beraberel</span></a> <a class="fobu"><img src="https://cdn1.iconfinder.com/data/icons/UltraBuuf/512/Thor.png" style="width: 20px;" /><span>redhairedmoira</span></a> <a class="fobu"><img src="https://cdn1.iconfinder.com/data/icons/UltraBuuf/512/Thor.png" style="width: 20px;" /><span>witm</span></a> <a class="fobu"><img src="https://cdn1.iconfinder.com/data/icons/UltraBuuf/512/Thor.png" style="width: 20px;" /><span>padme</span></a> <a class="fobu"><img src="https://cdn1.iconfinder.com/data/icons/UltraBuuf/512/Thor.png" style="width: 20px;" /><span>uc</span></a></center>

CSS

Code:

* {
  font-family: Tahoma, Verdana, Arial, serif, Georgia, Courier New;

}
a.fobu {
  position: relative;
  color: #576186;
  text-decoration: none;
}

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

}
a.fobu:hover {
  background: none; /* correction d'un bug IE */
  z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
}
a.fobu:hover span {
  display: inline; /* on affiche l'infobulle */
  position: fixed;

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

  background-color: white;
  top: 440px; /* on positionne notre infobulle */
  left: 877px;

  background: #transp;
  width: 190px;
  height: 75px;
  color: #576186;
  padding: 3px;
}

[tupac]

Bonsoir Cheeralex,

J'ai apporté les modifications aux infobulles, dites moi si ça vous convient.
Je vous ai envoyé le lien du forum par MP.

[Cheeralex]

Merci beaucoup Tupac ♥
J'ai répondu à votre mp