2008
04.09
04.09
I wrote a blog post about this a while back but now I’m adding a full tutorial so you can actually see an example as it’s created. Learn how to turn any CSS background image into a clickable image map.
Try my tute and let me know what you think:
I’ll be adding more CSS tutorials in the coming weeks, so check back every so often.
Hey this is great, but does it work on sites that are centered on the page since it’s moving around?
thanks Debbie!
never mind. It works! Thank you!
What if you want the entire background image area clickable through css, how do you position text links on top of the (clickable) area. Will they work?
Markei –
Check this tutorial: http://haacked.com/archive/2006/01/13/ClickableBackgroundImagesViaCSS.aspx
You can use that technique to make the entire background image clickable (so it would be ‘.box1 a’ that you’re using) and then use specific elements like ‘#box-link’ to create the text links on top.
You might have to use z-index to make the text links be on top of the background link, not sure about that at this hour…
Thanks for this great tutorial!
Debbie,
Thanks for that.
That fixed an issue for me (well almost…).
Internal links work, but wanted to link to a subdomain, is there a trick for that?
Thanks again!
Oops! My bad…
Left in a ‘ that caused an issue while I got a challenge with my eyes and the text size
Cheers!
I don’t know why it doesn’t seem to work on Google Chrom/Mozilla Firefox.
It only works on MS IE/CrazyBrowser.
What did I do wrong? hmmmm
It actually works fine in FF/Safari – it was built in FF. Can you give me a link to your page where it’s not working?
I had a problem in IE7 where only the border itself was clickable (not the interior of the transparent box). I switched from background-color: transparent to a 1×1 transparent .gif as the background image and it worked. Who knows what I was doing wrong, but hopefully this helps someone else!
The clearest and most to-the-point tutorial I’ve read (and I’ve read dozens), if you want to learn how to put a CSS image map in a header image in WordPress. Very well written. Thanks, Debbie!
ELEGANT thank you