18077 sujets
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
Modifié par princenoir (11 Jul 2005 - 12:30)
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)