Div, background image and image map

Question

On the webpage I am creating, I have a div with a background image. I impose some text on the text, which I often change, so I use the background image and the real text instead of the img tag that contains the text.

The background image contains some areas that are clickable, 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 corresponding to the areas available for the area area.

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

Answer 1

If you only need a rectangle shape for the links on the image map, you can use css specific link positions instead. This is achieved by specifying the position and setting the transparency of the background. Here is an example: http://www.position-relative.com/tutorials/tute1_css_bg_image.php

Answer 2

something you can try by placing the background div on the IE "float"

div.background { float:left; }

since he got a "float" on it, the background size will not click on the divs that come after it aside ...

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

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

to place the text area (which you are going to edit a lot) over the div background

Answer 3

IE6 does not support transparency, so I recommend that you use a hacked png file for IE6.