I´m trying to turn off the lights when someone enter into a <area> tag, and turn it on when it leaves the <area> tag.

What i have done It is working, but not properly. YOu can see it at:

http://kalearte.com/nuevas/es/vg/alava/visita-guiada-llanada-alavesa.html

I have done this:

 

I have put a div, which id="oculta" at the end of the document, that is going to be show when your mouse is over the <area id="uno" /> tag

1. <area shape="poly"  id="uno" coords="90,0,140,93,144,133,75,176,0,54,90,0" href="#" alt="Alava llanada alavesa" />
2. .....
3. <div id="oculta"></div>
4. </body>
5. </html>

Jquery code:

1. $('#uno').mouseenter(function(e){
2. $('#oculta').css('display','block')
3. });
4. $('#uno').mouseleave(function(e){
5. $('#oculta').css('display','none')
6. });

CSS code

1. #oculto{
2. display:none;
3. position:absolute;
4. background:#000;
5. width:100%;
6. height:100%;
7. z-index:2;
8. display:none; 
9.  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=45)";
10.     filter: alpha(opacity=45);
11.     -khtml-opacity: 0.45;
12.     -moz-opacity: 0.45;
13.     opacity: 0.45;
14. }

I have tryed to change mouseenter to mouseover and mouseleave to mouseout, but the same problem appears

Thanks!!!!