Div, Background Image, and Image Map

Coolmoondog picture Coolmoondog · Nov 13, 2009 · Viewed 13.1k times · Source

On a web page I'm creating, I have a div with a background image. I overlay some text over the image that I'll be changing frequently, so that's why I'm using a background image and real text instead of an img tag that contains the text.

The background image contains some click-able areas, so I need an image map.

I think the best way to do this is to have another overlay div with a transparent image, and have an image map for the transparent image that corresponds to the background area click-able areas.

Am I on the right track, or is there a better way?

Answer

James Kolpack picture James Kolpack · Nov 13, 2009

If you only need the "rectangle" shape for the links in the image map, you could use css defined link positions instead. This is accomplished by specifying the position and setting the background-color to transparent. Here is an example: http://www.position-relative.com/tutorials/tute1_css_bg_image.php