Texte derrière une image infobulle transparente
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Texte derrière une image infobulle transparente
Bonjour cher amis,
Alors j'ai besoin de votre aide pour la réalisation d'un certain codage. Je vous explique :
- Dans chaque catégorie de mon forum RPG j'ai mis une image de lieu, mais ce que j'essaye de faire c'est que quand la souris survole l'image, elle devient transparente (ou bien un fond noir) pour laisser place à la description du lieu en texte à la place de l'image.
J'ai tout essayé, une vingtaine de tutoriels, mais je ne trouve pas ce que je veux exactement. Je vous remercie sincèrement de pouvoir m'aider. Malheuresement je ne trouve pas d'exemple sur le net à vous montrer.
Cordialement
(forum php2)
Alors j'ai besoin de votre aide pour la réalisation d'un certain codage. Je vous explique :
- Dans chaque catégorie de mon forum RPG j'ai mis une image de lieu, mais ce que j'essaye de faire c'est que quand la souris survole l'image, elle devient transparente (ou bien un fond noir) pour laisser place à la description du lieu en texte à la place de l'image.
J'ai tout essayé, une vingtaine de tutoriels, mais je ne trouve pas ce que je veux exactement. Je vous remercie sincèrement de pouvoir m'aider. Malheuresement je ne trouve pas d'exemple sur le net à vous montrer.
Cordialement
(forum php2)
Dernière édition par Mondo Gecko le Ven 3 Aoû 2012 - 11:29, édité 1 fois
Mondo Gecko- *
- Messages : 30
Inscrit(e) le : 26/03/2012
Re: Texte derrière une image infobulle transparente
Ma demande est toujours d’actualité. En espérant trouver de l'aide.
Merci. ^^
Merci. ^^
Mondo Gecko- *
- Messages : 30
Inscrit(e) le : 26/03/2012
Mondo Gecko- *
- Messages : 30
Inscrit(e) le : 26/03/2012
Mondo Gecko- *
- Messages : 30
Inscrit(e) le : 26/03/2012
Re: Texte derrière une image infobulle transparente
Déjà une semaine et personne pour m'aider ? S'il vous plait HELP ME. :thanks:
Mondo Gecko- *
- Messages : 30
Inscrit(e) le : 26/03/2012
Re: Texte derrière une image infobulle transparente
bonjour,
le code à mettre dans la description :
le CSS à mettre dans votre feuille de style perso :
pour les autres descriptions , il faut renommer id="case_depart" dans le code
(par exemple : id="case_info")
et rajouter :
le code à mettre dans la description :
- Code:
<div class="descript_content">
<div class="descript_text">placez ici la description <br />placez ici la description<br />placez ici la description</div>
<div class="descript_image" id="case_depart"></div>
</div>
le CSS à mettre dans votre feuille de style perso :
- Code:
/* cases descriptions */
.descript_content{
width:600px;
height:90px;
position:relative;
top:0px;
left:0px;
}
.descript_text{
padding:5px;
font-size:12px;
color:gray;
}
.descript_image{
width:600px;
height:90px;
position:absolute;
top:0px;
left:0px;
}
#case_depart{
background:url(http://img11.hostingpics.net/pics/415798icon.png);
}
.descript_image:hover{
opacity:0.2;
}
pour les autres descriptions , il faut renommer id="case_depart" dans le code
(par exemple : id="case_info")
et rajouter :
- Code:
#case_info{
background:url(http://img11.hostingpics.net/pics/856062icon2.png);
}
Re: Texte derrière une image infobulle transparente
Merci beaucoup, mais je tien à m'excuser, parce que j'ai complément oublié de mentionner sur le forum dans lequel je travail. Voici l'adresse : http://bluezone.frbb.net
Donc voila j'ai appliqué votre codage, mais il me faudra deux choses :
- Pouvoir centrer l'image et le texte.
- Faire en sorte que l'image soit totalement transparente pour avoir une meilleur lisibilité de lecture.
Merci d'avance pour votre temps consacré face à mon cas et ma maladresse.
Donc voila j'ai appliqué votre codage, mais il me faudra deux choses :
- Pouvoir centrer l'image et le texte.
- Faire en sorte que l'image soit totalement transparente pour avoir une meilleur lisibilité de lecture.
Merci d'avance pour votre temps consacré face à mon cas et ma maladresse.
Mondo Gecko- *
- Messages : 30
Inscrit(e) le : 26/03/2012
Re: Texte derrière une image infobulle transparente
bonjour,
j'ai modifié le CSS :
remplacez tout par :
les images ont maintenant une couleur de fond qui cachera le texte , et qui disparaitront au survol ...
le tout est centré ...
j'ai modifié le CSS :
remplacez tout par :
- Code:
/* cases descriptions */
.descript_content{
width:300px;
height:90px;
position:relative;
margin:auto;
}
.descript_text{
padding:5px;
text-align:center;
font-size:12px;
color: grey;
}
.descript_image{
width:300px;
height:90px;
position:absolute;
top:0px;
left:0px;
}
.descript_image:hover{
opacity:0;
}
#case_depart{
background:#171F28 url(http://img15.hostingpics.net/pics/327623accueil.png);
}
#case_info{
background:#171F28 url(http://img15.hostingpics.net/pics/649361registre.png);
}
les images ont maintenant une couleur de fond qui cachera le texte , et qui disparaitront au survol ...
le tout est centré ...
Re: Texte derrière une image infobulle transparente
C'est.... C'est EXCELLENT.
Merci beaucoup Scoubifitz, j'apprécie ce que tu as fais pour moi.
Probleme résolue et un "merci" pour cet excelent codeur.
Merci beaucoup Scoubifitz, j'apprécie ce que tu as fais pour moi.
Probleme résolue et un "merci" pour cet excelent codeur.
Mondo Gecko- *
- Messages : 30
Inscrit(e) le : 26/03/2012
Sujets similaires
» Problème d'affichage d'un texte derrière l'image à son survol
» Image qui coulisse et laisse apparaitre un texte derrière
» Infobulle : texte dans l'infobulle qui se souligne
» Hover: texte derrière texte
» Image non transparente
» Image qui coulisse et laisse apparaitre un texte derrière
» Infobulle : texte dans l'infobulle qui se souligne
» Hover: texte derrière texte
» Image non transparente
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum