Appliquer un style :hover aux liens d'une map

Bonjour,

j'ai une image dans une div, sur cette image j'applique une map. J'aimerai appliquer une ombre au passage de la souris sur les liens de cette map. Voilà ce que j'ai tenté sans résultat :

#TEST img map area[title="123"]:hover{-moz-box-shadow: inset -2px -2px 2px 2px #CCC;-webkit-box-shadow: inset -2px -2px 2px 2px #CCC;box-shadow: inset -2px -2px 2px 2px #CCC;} 

			<div id="TEST"><img src="/images/00/pix.png" width="314" height="109" border="0" alt=""  usemap="#map" /></div>
<map name="map" id="map">
			<area title="123" href="#" shape='rect' coords='0,26,192,52' />
			<area title="231" href="#" shape='rect' coords='0,53,192,76' />
			<area title="321" href="#" shape='rect' coords='0,77,192,103' />
</map></a></div>

Voilà, c'est possible ?

Thanks !
Modifié par JimmyWJimmy (09 Mar 2011 - 16:49)

Salut,

Premièrement tes maps ne sont pas enfant de la balise image et de la div #test. Donc pour ça, le code CSS n'aura aucun effet.
Deuxièmement, mais j'en suis moins sûr. area[title="123"], je ne sais pas si c'est bien compris par tout les navigateur. Peut être tu peux placer une classe dans tes maps et faire le :hover sur celles-ci ?

map .shadow_area:hover{
    -moz-box-shadow: inset -2px -2px 2px 2px #CCC;
    -webkit-box-shadow: inset -2px -2px 2px 2px #CCC;
    box-shadow: inset -2px -2px 2px 2px #CCC;
} 

<div id="TEST">
    <img src="/images/00/pix.png" width="314" height="109" border="0" alt="" usemap="#map" />
</div> 

<map name="map" id="map"> 
    <area class="shadow_area" title="123" href="#" shape='rect' coords='0,26,192,52' /> 
    <area class="shadow_area" title="231" href="#" shape='rect' coords='0,53,192,76' /> 
    <area class="shadow_area" title="321" href="#" shape='rect' coords='0,77,192,103' />
</map>