Applying z-index to image map?

HTML & CSS
1

Hey everyone,

Does anyone know how to apply a z-index to the map or area elements in an image map?

I have an image map that when you click on an area, it then fades out the entire map and then fades in an absolutely positioned piece of the map (with drop shadow effects etc) to show you have clicked it.

This works fine but the problem we have found now, is that the div that fades in is blocking the image map around the rectangle that the div creates.

Anyone know how I can get around this with z-index? I’ve tried but it doesn’t appear to be working, even with setting the elements to position: relative.

http://preview.maxrider.co.uk/common/siri

You’ll notice if you click on area’s that are far apart, it will work fine but area’s close together, or even next together, once active, you have to move around to see where the cursor changes.

I’d appreciate anyone’s advice on this!

Cheers

2

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

3

Already tried :stuck_out_tongue: - FireBug/Firefox doesn’t show it in the CSS section. Although it does for the Map element, although it doesn’t actually fix the problem.

Thanks :wink:

4

Sorry about the last post. I was at work. No scripts, couldn’t really see what’s going on there.

Now, what you’re trying to do is a paradox. You’re trying to position areas in a map above a div, except one area. It’s not possible since map and div are siblings. If that div was also a child in map, maybe you could do something, I don’t know. Never tried something like that.

First off, if divs where so versatile, image maps for irregular shapes would become obsolete.

Secondly, since divs are block elements, you can’t really expect parts of it, like the corners, to behave differently.

z-index will never solve your problem, given your current layout. Since you “replace” an irregular shape element: the image map area, with a regular shape element: a div, you’re whole point of using image maps is also void.