css - hover over change background of entire map

[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

[Els]

ch**********@yahoo.com wrote:

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...
Only if that entire map would really be contained within that link.
Could work with spans and absolute positioning, relative to the links
themselves which also would be have position:absolute;.
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>
***

I'm not seeing how the above would be working for what you want, but
apart from that, you can't use an id twice in one page.
Try replacing the <dd id="cms"> with <dd id="cms2"> and change the
styles accordingly to see if that helps.

But hovering over the <a> in the <dd> will not cause the background
image to appear anywhere else than right there where you are hovering.

To make that happen, you'd need to add a <span> inside the <a>
element, and give that span a height, width, display:block, and
position (absolute, but relative to the link itself) and a background
image.

Problem with that is though, that this background image would cover
all the links that are earlier in the code, and be covered by all the
links later in the code. Or at least in one or two browsers that would
be the case, forgot which one(s).

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Electric Boys - Mary In The Mystery World

[chris_culley]

Yes - you're entirely right, the span does cover up other links..
hadn't thought of that...

Just changing the background for each link would be better - will have
to dig out some better image manipulation kit other than paint I guess
....

Many thanks

Chris