|
Posted by Els on February 14, 2006, 6:58 am
Please log in for more thread options
chris_culley@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
| 
XML Sitemap