Assigning usemap to a css defined background image?

HTML & CSS
1

I have a bit of CSS that does an image background:

<div id='wrapper' style="background-image: url(box1.jpg); height: 594px; width: 830px; margin-top:20px">

but I need to turn the image into an imagemap?

2

Simple answer is you don’t…

If you want various areas to be link “hotspots”, then it is a matter of inserting an unordered list of links within the div, and size and position the <a>s over top of the relevant parts of the background image - the method used for the positioning will depend on the graphic.

3

And I highly doubt its “Absolute”. LOL

Shahid

Do you have a image? I’ll take a look at it.

4

With some “maps” like this, absolute positioning is the easiest - rather depends on the image and where the hotspots are to be located, like this demo I did for one of the members here a while back.

5

I’ve been using position: absolute for ALL of my image maps as well. With pixel-sized images, it’s really the only way to be pixel-perfect with the anchors (margins just go a little off per browser, esp in Safari, I tried).

6

Dont worry guys.

I have changed the design a bit.

Now I am using <a href> tags now.

Thanks

7

Hi -

I found a way to do this for a client that did not want a mapped image to be able to be printed (easily).

Use a transparent gif that has the same dimensions as the mapped image - loaded into a div with a background image of the original.

thats’ it!

  • LP