hover over css map and change background

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

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:

    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>

Many thanks,


Site Timeline