CSS Element Specificity Problem

[studiocreek]

I'm trying to create an image map using CSS which I have done successfully - but I need the entire background image to change when the user hovers over any part of the page.

I have this partially working but when a link is triggered the entire page turns into one link and the other parts of the image map stop functioning...

Here is the link: http://www.studiocreek.com/client/firefly/index2.html

Please view the source to see both html and css (all validated).

Any feedback would be appreciated.

[jscheuer1]

There is no image map on that page. Perhaps you would have better luck if you used one.

[studiocreek]

I created an image map using CSS absolute positioning and coordinates... you can see the map in the css code here:

a#store { top: 5px; left:5px; width:640px; height: 112px;}
a#contact {top:122px; left:477px; width:168px; height:191px;}
a#exhibition {top:320px; left:231px; width:418px; height:165px;}
a#press {top:320px; left:5px; width:221px; height:165px;}
a#about {top:122px; left:5px; width:140px; height:191px;}
a#home {top:122px; left:150px; width:322px; height:191px;}