hover over css map and change background

[chris_culley]

Hi there,

I've got a gif with (highly) irregular shapes (lots of jigsaw pieces)
that I want to map so that each piece is a link...

The pieces are currently just a frame drawing, but as they are hovered
over I want them to be coloured in. I thought the easiest way to do
this would be to change the background image of the entire map (since
it's a bit of a pain trying to select each piece out of the image and
colour them seperately...), with a seperate image showing one of the
pieces coloured in at a time. Is this possible?


Basically, I want to know if it's possible to have a hover over a link
change the background of the entire map and not just that link...




The css (largely pilfered from Frank Manno's site - cheers ) is
currently as follows:

***
dl#jigsaw{
margin: 0;
padding: 0;
background: url('images/jig_frame_small.gif') no-repeat top left;
height: 105px;
width: 354px;
position: relative
}

dt{ margin: 0; padding: 0; position: absolute; font-size: 85%; display:
none; }
dd{ margin: 0; padding: 0; position: absolute; font-size: 85%; }

dd#cms{ top: 0px; left: 0px; }

dd#cms a{ position: absolute; width: 73px; height: 69px;
text-decoration: none; background-color:red;}

dd#cms a:hover{ position: absolute; background:
url('images/jig_frame_small.gif') no-repeat top left }
***

This cms a:hover doesn't do anything!



the html looks like this:

***
<dl id="jigsaw">
<dt id="cms">1. Monitor</dt>
<dd id="cms"><a href="index.htm"></a></dd>
</dl>
***


Many thanks,

Chris