|
|
Posted by chris_culley on 02/14/06 13:31
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
Navigation:
[Reply to this message]
|