28173 sujets

CSS et mise en forme, CSS3

Images Zone Réactive + Texte !

Bonjour a tous !

Voila enfaite j'ai un petit probleme, je désirai créer une zone réactive par rapport a du texte...

Je m'explique, Sur une image, la souris passerai sur une partie et afficherai un certain texte, sur une autre partie de cette meme image elle afficherai un autre texte... Vous comprenez ?

J'ai essayer de m'inspirer des hovers des menu css mais la je bloque un peu :s

Merci pour vos réponses Smiley smile

Tomy
Salut,

Pour une idée:
<style type="text/css">
#image{
border: 1px solid black;
position: relative;
width: 100px;
height: 157px;
background: url(image.jpg);
}

#image a {
display: block;
width: 20px;
height: 20px;
position: absolute;
color: #000;
text-decoration: none;
}

#image a span{
display:none
}

#image a:hover span{
display:inline;
position: absolute;
left: 30px;
top: 0px;
}

#texte1{
background: lime;
top: 30px;
left: 30px;
}

#texte2{
background: red;
top: 70px;
left: 30px;
}
</style>
	
</head><body>
<div id="image">
<a href="#" id="texte1" ><span>texte1</span></a>
<a href="#" id="texte2" ><span>texte2</span></a>
</div>
</body>
Salut,

Merci pour ta réponse,

Ton code est très intéréssant, c'est exactement ce qu'il me fallait mais j'ai tout de même une question...

N'aurai t'il pas moyen de séparer le texte de l'image ?

Donc on passerai sur l'image mais le texte s'afficherai en dessous de celle ci....

Je sais je suis compliqué Smiley smile merci beaucoup
Salut,

#image{
position: relative;
width: 100px;/*-- image test 100px x 157px --*/
height: 157px;
background: url(image.jpg);/* placement du background image dans le block*/
background-repeat: no-repeat;
}

#image a {
display: block;
width: 20px;
height: 20px;
position: absolute;
color: #000;
text-decoration: none;
border: 1px solid black;/*visualisation des zones réactives*/
}

#image a span{
display:none
}

#image a:hover span{
display:block;/* pour pouvoir centrer le texte */
width: 100px;
position: absolute;
text-align: center;
}

#image a:hover{ /* pour éviter bug IE6 */
background: none;
}

#texte1{
top: 30px;
left: 10px;
}

a#texte1:hover span{
top: 127px;/* 157px-30px */
left: -10px;/* 10px-10px */
}

#texte2{
top: 70px;
left: 30px;
}

a#texte2:hover span{
top: 87px;/* 157px-70px */
left: -30px;/* 30px-30px */
}
</style>


Voilou
hello, je veux pas etre lourd...

Mais ce code me semble etre vraiment proche de celui que j'essaye de faire depuis longtemps...

Donc le but... c'est une image une fois que l'on passe avec le curseur sur une partie de cette image un petit message s'inscrit en bas de l'image (pas sur l'image !!!)

Enfin je pense que ce code est bon mais je dois pas créer le bon html alors ?

moi j'ai ca : 
<div id="image"><a href="#" id="texte1" ><span>texte1</span></a><a href="#" id="texte2" ><span>texte2</span></a></div>


Enfin voilou merci beaucoup Smiley smile
Sujet clos
Aller à