Div, Background Image, and Image Map

Question

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?

Lettielettish

Answer 1

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

Flatware

Answer 2

something you might try is placing the background div on "float" IE

div.background { float:left; }

since its got a "float" on it the size of the background wont push the divs that come after it to the side...

then you can make a second div to contain all the text stuff and then use something like :

div.textarea{ position:realtive; left:50px; }

to position the text area (that youll be editing a lot) above the div background

Nidorf

Answer 3

IE6 doesn't support transparency so I recommend you use the IE6 png fix hack.

Wistrup