<map> ... </map>

[twomt]

Hello,

I have a <div> with a background image on which i would like to use the <map></map> tags to set a link at a certain spot.

Now I can do the map function on an image that is shown after the map has been declared with the usemap attribute, but is there a way to do this on a div as well or do I have other means to set links at certain spots of a background image?

[Arbitrator]

You can do this (without the map element), but it depends on whether or not the selectable region is rectangular.

Edit: The selectable region must be rectangular. However, now that I think about it, I would recommend against using the technique since it would result in duplicated content and decrease accessibility.

<div><a href="/"><img alt="…" width="…" height="…" src="…"></a></div>

In the above code, the image element would be completely transparent (or a repeat of the content underneath). The anchor element would be positioned over the “selectable” area of the background and the image within would be styled such that its width and height are of the same dimensions as this selectable area. With this, you would have a fall‐back in case (A) the images fail to load and (B) in case CSS is disabled. The fall‐back in the case of (B) would be pretty poor though since you couldn’t see anything unless you used the mentioned repeat of content. In the case of (A), if the anchor image failed to load but the background image did not, you would end up with duplicate text over the background image. If the reverse happened and the anchor image loaded, but the background image did not, then you would have an invisible link unless you used the mentioned repeat of content. (A) would, however, work fine if both images failed to load.