Bonjour à tous ! j'ai créé un image map en css( 9 div), et je voudrais qu'au survol de ces div, apparaisse une image à un endroit bien précis (dans la 10eme div)... eh bien... je coince ! (mes images apparaissent dans la div survolée)
A l'aide !!!
Modifié par princenoir (11 Jul 2005 - 10:22)
Désolé! voici donc mon code:
le résultat affiche bien les images dans/par-dessus les div survolées.
comment faire pour qu'elles s'affichent à un autre endroit ?
Merci d'avance de vos lumières!
http://www.pg-web-creation.com/tests/plan_bl/plan2.html

<div id="conteneur">
<a id="larenney"  href=""><span><img src="IMG_1569.jpg" /></span></a>
<a id="fongravey"  href=""><span><img src="IMG_1575.jpg"  /></span></a> 
<a id="laposte"  href=""><span><img src="IMG_1576.jpg"  /></span></a> 
<a id="eglise"  href=""><span><img src="IMG_1584.jpg"  /></span></a> 
<a id="mairie"  href=""><span><img src="IMG_1593.jpg"  /></span></a> 
<a id="corbeil"  href=""><span><img src="IMG_1587.jpg"  /></span></a> 
<a id="carrefour"  href=""><span><img src="IMG_1590.jpg"  /></span></a> 
<a id="colonnes"  href=""><span><img src="IMG_1582.jpg"  /></span></a> 
<a id="carpinet"  href=""><span><img src="IMG_1579.jpg"  /></span></a> 
<a id="gege"  href=""><span><img src="IMG_1573.jpg" width="202" height="135" border="0" /></span></a> 
</div>


CSS:

a {
text-decoration: none; /* définition du lien qui affichera le "calque" */
}
a:hover {
	background: none;
	text-decoration: none;

}
a span { /* définition de la balise <span> inclue dans <a> */
display: none;
}
a:hover span {
	display: inline;
	position: absolute;
	top:-10px;
	left: -50px;
	width: 200px;
	height: 133px;
	text-align: left;
	text-decoration: none;


}





#conteneur {
	background-color: #CCCCCC;
	height: 500px;
	width: 570px;
	background-image: url(plan_bl.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}
img {
	border: none;
	text-decoration: none;
	padding: 0px;


}

#fongravey{
position:absolute;
left:229px;
top:93px;
width:71px; 
height:23px; 
z-index:1;
}

#larenney{
position:absolute;
left:379px; 
top:201px;
width:65px; 
height:42px;
z-index:2;
}

#laposte{
position:absolute;
left:277px;
top:233px;
width:38px;
height:34px;
z-index:3;
}
#eglise{
position:absolute;
left:130px;
top:318px;
width:40px;
height:29px;
z-index:5;
}

#mairie{
position:absolute; left:318px; top:340px; width:43px; height:23px; z-index:6
}

#corbeil{
position:absolute; left:313px; top:378px; width:58px; height:28px; z-index:7
}
#carrefour{
position:absolute; left:502px; top:392px; width:40px; height:38px; z-index:8
}
#colonnes{
position:absolute; left:217px; top:288px; width:40px; height:33px; z-index:9
}
#carpinet{
position:absolute; left:258px; top:336px; width:24px; height:30px; z-index:10
}
#gege{
position:absolute; left:134px; top:153px; width:34px; height:29px; z-index:11
}

Modifié par princenoir (11 Jul 2005 - 12:30)