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.
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.
<div><a href="/"><img alt="…" width="…" height="…" src="…"></a></div>
For every complex problem, there is an answer that is clear, simple, and wrong.
Last edited by Arbitrator; 06-03-2007 at 02:00 PM..
Reason: I described the technique that I was referencing.