467,867 Members | 1,597 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,867 developers. It's quick & easy.

css - hover over change background of entire map

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

Feb 14 '06 #1
  • viewed: 4230
Share:
2 Replies
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
Feb 14 '06 #2
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

Feb 14 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

51 posts views Thread by madsgormlarsen | last post: by
24 posts views Thread by fehays | last post: by
3 posts views Thread by mfc1981 | last post: by
1 post views Thread by darkzone | last post: by
reply views Thread by jack112 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.