How to make an <area visible ?

[tur130]

On a page using several <area> regions over an <img>, how can you make the <area> regions visible on the rendered web page?

The <area> tag apparently supports the style attribute, but I can't find any information on how to use it.

I've tried in line styles e.g.

<area style="border:5 px solid red;" ...

But they don't show up on the web page.

Thanks in advance for any help on how best to make an <area> visible. (without changing the img file)

[tur130]

Arrrh...

A search shows this one has puzzled seasoned web developers.

I thought I'd float some box images with transparent centers over my map to show where the hot spots are. Visually it looked like it would work but the floating image masked the clickable hot spot - D'oh!

This is my solution so far - very ugly both as code and on the renderd page:

<div id="box1" onmouseover='document.getElementById("box1").style.visibility = "hidden" ;' onmouseout='document.getElementById("box1").style.visibility = "visible" ;' style="position: absolute; left: 288px; top: 324px">
	<img src="box.png" />
</div>

It works if you're willing to wiggle your mouse over the hotspot until the outline "box.png" is invisible and the underlying map becomes clickable.

I suppose I could hard code the floating images to have the same href as the area it is masking. And the map would become redundant...hmm m.

Any hints on a better solution would be appreciated.