Forum Moderators: not2easy

Message Too Old, No Replies

CSS overlapping image links

         

cbastian

3:30 pm on Jun 3, 2008 (gmt 0)

10+ Year Member



I'm trying to create a page with overlapping images, that have links associated with them. I've got the CSS down to make the links overlap. But, everytime I try to make a link, the top image link covers up everything else. Is there a way that I can adjust this so that each images link is only in the area where the image is at? If that makes sense...:)

I'm using 6 circles of varying sizes. from a large circle on the bottom, to a small circle on the top. It kinda looks like a target. But, I only need the visible part of each circle to access the link...

Any help is greatly appreciated...

Thanks,
Charles...

appi2

4:54 pm on Jun 3, 2008 (gmt 0)

10+ Year Member



Hard to say without an example of code but is this any good.

Using a 500px (ish) image of a "RAF roundel" and an "image map" <-- google this or search the forum

like this..

<img src="raf.jpg" width="500" height="500" border="0" usemap="#Map">
<map name="Map">
<area shape="circle" coords="240,254,71" href="#1">
<area shape="circle" coords="242,250,142" href="#2">
<area shape="circle" coords="237,251,212" href="#3">
</map>

Make sure the smallest is the top one. Then the next smallest with the largest last.

Also note I've ignored accessabilty and given you the basics no alt etc.

Seems to work in ie ff opera safari

ps welcome to WebmasterWorld :)

cbastian

7:39 pm on Jun 3, 2008 (gmt 0)

10+ Year Member



Thanks, I looked that up on the web and in my books, and that will work for my purposes. Thanks very much!

--Charles...