Créer une infobulle sur une image de titre

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

Résolu Créer une infobulle sur une image de titre

Message par amazonia-piranha le Mar 20 Sep 2011 - 19:00

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:
Code:

<img src="ADRESSE DE L IMAGE">

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

Merci d'avance !


Dernière édition par amazonia-piranha le Mer 21 Sep 2011 - 13:43, édité 1 fois

amazonia-piranha
***

Masculin
Messages : 195
Inscrit(e) le : 03/05/2011

http://www.amazonia-piranha.com/forum
amazonia-piranha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une infobulle sur une image de titre

Message par Chouquette~ le Mar 20 Sep 2011 - 21:24

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

Chouquette~
*****

Masculin
Messages : 666
Inscrit(e) le : 15/07/2009

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

Résolu Re: Créer une infobulle sur une image de titre

Message par amazonia-piranha le Mer 21 Sep 2011 - 1:43

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

amazonia-piranha
***

Masculin
Messages : 195
Inscrit(e) le : 03/05/2011

http://www.amazonia-piranha.com/forum
amazonia-piranha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une infobulle sur une image de titre

Message par Chouquette~ le Mer 21 Sep 2011 - 11:41

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

Mr. Green

Chouquette~
*****

Masculin
Messages : 666
Inscrit(e) le : 15/07/2009

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

Résolu Re: Créer une infobulle sur une image de titre

Message par amazonia-piranha le Mer 21 Sep 2011 - 13:00

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

amazonia-piranha
***

Masculin
Messages : 195
Inscrit(e) le : 03/05/2011

http://www.amazonia-piranha.com/forum
amazonia-piranha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une infobulle sur une image de titre

Message par Chouquette~ le Mer 21 Sep 2011 - 13:08

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 ... Rolling Eyes
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>

Chouquette~
*****

Masculin
Messages : 666
Inscrit(e) le : 15/07/2009

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

Résolu Re: Créer une infobulle sur une image de titre

Message par amazonia-piranha le Mer 21 Sep 2011 - 13:36

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 !

amazonia-piranha
***

Masculin
Messages : 195
Inscrit(e) le : 03/05/2011

http://www.amazonia-piranha.com/forum
amazonia-piranha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une infobulle sur une image de titre

Message par Chouquette~ le Mer 21 Sep 2011 - 13:45

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.

Chouquette~
*****

Masculin
Messages : 666
Inscrit(e) le : 15/07/2009

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

Résolu Re: Créer une infobulle sur une image de titre

Message par amazonia-piranha le Mer 21 Sep 2011 - 13:49

Super ! Merci beaucoup pour votre aide ! =)

amazonia-piranha
***

Masculin
Messages : 195
Inscrit(e) le : 03/05/2011

http://www.amazonia-piranha.com/forum
amazonia-piranha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer une infobulle sur une image de titre

Message par Chouquette~ le Mer 21 Sep 2011 - 14:17

Parfait Wink.

Bonne journée Mr. Green

Chouquette~
*****

Masculin
Messages : 666
Inscrit(e) le : 15/07/2009

Chouquette~ 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