Texte derrière une image infobulle transparente

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

Résolu Texte derrière une image infobulle transparente

Message par Mondo Gecko le Lun 23 Juil 2012 - 16:16

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)


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

Mondo Gecko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte derrière une image infobulle transparente

Message par Mondo Gecko le Mar 24 Juil 2012 - 19:32

Ma demande est toujours d’actualité. En espérant trouver de l'aide.

Merci. ^^

Mondo Gecko
*

Messages : 30
Inscrit(e) le : 26/03/2012

Mondo Gecko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte derrière une image infobulle transparente

Message par Mondo Gecko le Jeu 26 Juil 2012 - 10:22

Un petit UP.

Mondo Gecko
*

Messages : 30
Inscrit(e) le : 26/03/2012

Mondo Gecko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte derrière une image infobulle transparente

Message par Mondo Gecko le Lun 30 Juil 2012 - 1:11

UP

Mondo Gecko
*

Messages : 30
Inscrit(e) le : 26/03/2012

Mondo Gecko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte derrière une image infobulle transparente

Message par Mondo Gecko le Mer 1 Aoû 2012 - 11:03

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

Mondo Gecko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte derrière une image infobulle transparente

Message par Scoubifitz le Mer 1 Aoû 2012 - 14:45

bonjour,

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);
}
... dans le CSS .

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte derrière une image infobulle transparente

Message par Mondo Gecko le Ven 3 Aoû 2012 - 4:19

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.

Mondo Gecko
*

Messages : 30
Inscrit(e) le : 26/03/2012

Mondo Gecko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte derrière une image infobulle transparente

Message par Scoubifitz le Ven 3 Aoû 2012 - 4:44

bonjour,

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


Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte derrière une image infobulle transparente

Message par Mondo Gecko le Ven 3 Aoû 2012 - 11:28

C'est.... C'est EXCELLENT. cheers

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

Mondo Gecko 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