[HTML] Shape area sur une image qui se trouve dans un div
Hello world,
Sujet à la croisée du html et du css.
J'ai crée une image. Insérée dans une page html, elle devra jouer le rôle de "cadre de navigation" au centre duquel devra s'afficher une autre image, comme sur la capture suivante :
http://img524.imageshack.us/img524/9...blemnavek6.png
Les flèches rouges appartiennent à l'image "cadre de navigation" alors que la photo de Sartre est la seconde image : une image dans une image.
Alors voilà comment je débute mon implémentation ...
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| #cadre_navigation
{
width: 134px;
height: 80px;
background-image: url('./nav.png');
}
#image_dans_cadre{
background-image: url('./" . $Num_image .".png') ;
margin-left: 19px ;
width: 96px ;
height: 80px ;
}
-->
</style>
</head>
<body>
<div id="cadre_navigation">
<div id="image_dans cadre"">
</div>
</div> |
Bref, vous voyez qu'il y a un div dans un div : une "image dans cadre" dans un "cadre navigation", une image dans une image...
MAIS je voudrais faire en sorte de pouvoir cliquer sur une flèche rouge de mon "image de navigation". Il me faut donc faire un shape area sur img.
Seulement voilà, si j'enlève le "background-image" du div afin de réaliser mon shape are sur IMG, et que j'implémente comme ça dans le body :
Code:
<div id='cadre_navigation'><img src='./nav.png' width='134px' height='80px' border='0px' usemap='#test' /><div id='image_dans_cadre'></div></div>";
Je n'ai plus de div dans un div, d'image dans une image, et voilà le rendu du navigateur :
http://img391.imageshack.us/img391/6...lemnav2dl6.png
Auriez-vous quelque chose à me proposer pour résoudre le problème ?
