I’m tryng to build an image map rollover effect using CSS only. However, I stumbled into an apparently unresolvable problem: the rollover effect and the links are fine, but only a portion of the rollover image is being displayed. This is my css:
When I pass with the mouse over one of the 9 buttons, the button image changes (and that’s right), but I can’t see another portion of the rollover image that should appear on the upper left corner. It is somehow "masked" by something… And I haven’t found how to make it appear – I know there must be something related to the width and height of the li ids, but when I tried to enlarge them I made that missing part of the image appear, but the activation of the buttons is worse than ever – the rollover effect can be seen only if I move the cursor completely out of the image and back again.
You can see a working exemple here. While this is one of the rollover images that should appear in full (please note the name on the upper left corner):