Créer une infobulle sur une image de titre

[amazonia-piranha]

Bonjour,

je cherche un moyen de faire une infobulle, sur une image que j'ai intégré dans le "titre du forum"
afin d'etre plus esthétique je cherche donc a faire une info bulle de description de forum

J'ai coller le script suivant dans "Nom du Forum " :

Spoiler:

Avez-vous une idée pour intervenir sur cette partie ?

Merci d'avance !

[Chouquette~]

Bonjour,
Je n'ai pas bien saisi sur quoi vous souhaitez appliquer l'infobulle.
Votre bannière ?

[amazonia-piranha]

je cherche un moyen de réalisé une infobulle au passage de la souris sur une image qui est dans mon titre de forum j'ai mit une image a la place d'un texte, car je ne voulais plus voir de titre texte sur ce forum, est pour éviter d'avoir une description super longue qui déformerais ma cellule je veut une infobulle, avec contour de la couleur de mon choix pareil pour le fond.

suis-je assé claire ?!

salutation

[Chouquette~]

OK. Il faut procéder comme suit.

1. le CSS :

Code:

a.info {
position:relative;
z-index:24;
color:#000000;
text-decoration:none
}
 
a.info:hover {
z-index:25;
background-color:#FFFFFF
}
 
a.info span {
display: none
}
 
a.info:hover span {
display:block;
position:absolute;
top:2em;
left:2em;
width:15em;
border:1px solid #000000;
background-color:#FFFFFF;
color:#000000;
font-weight:none;
padding:5px;
}

2. Le code HTML :

Code:

<a href="#" style="text-decoration:none;"><img src="ADRESSE DE L'IMAGE" alt="Texte alternatif" /><span> Texte à afficher dans l'infobulle </span></a>

NB- Tout est configurable selon l'apparence du forum. A toi de voir .

[amazonia-piranha]

bonjour,

Je vous remercie mais cela ne fonctionne pas,
même en le collant dans description du forum, sa m'affiche l'image et le texte.

[Chouquette~]

Le CSS a été mis dans la feuille de style ?

Edit : C'est une erreur de ma part, je n'ai pas fait appel à la class ...
Il faut utiliser ce code HTML :

Code:

<a href="#" style="text-decoration:none;" class="info"><img src="ADRESSE DE L'IMAGE" alt="Texte alternatif" /><span> Texte à afficher dans l'infobulle </span></a>

[amazonia-piranha]

Merci cela fonctionne tres bien j'ai juste rajouté les coins arrondi :

Code:


-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;


mais j'aurais une toute dernière question !
comment je choisi la largeur et la hauteur de la bulle ?
et comment je peut changer la position de la bulle pour éviter quel s'affiche en dessous, j'aimerai quel soit un peut sur mon image.

merci d'avance !

[Chouquette~]

Il suffit de changer les valeurs de ce bout de code, c'est lui qui gère le positionnement de l'infobulle :

Code:

a.info:hover span {
display:block;
position:absolute;
top:2em;
left:2em;
width:15em;

Il fonctionne comme suit : top permet de régler le décalage entre l'image et la bulle en hauteur. Et left le décalage à gauche.

[amazonia-piranha]

Super ! Merci beaucoup pour votre aide ! =)

[Chouquette~]

Parfait .

Bonne journée