Q935 How can I use an image map to alter text in a layer?

<map name="image-map">
<area shape="rect" coords="15,15,85,85" href="javascript:alert('Square')"
   onMouseOver="changeContent('layerName','Square');self.status='Square';return true"
   onMouseOut="self.status='';return true">
<area shape="rect" coords="93,15,110,85" href="javascript:alert('Rectangle')"
   onMouseOver="changeContent('layerName','Rectangle');self.status='Rectangle';return true"
   onMouseOut="self.status='';return true">
<area shape="circle" coords="150,50,35" href="javascript:alert('Circle')"
   onMouseOver="changeContent('layerName','Circle');self.status='Circle';return true"
   onMouseOut="self.status='';return true">
</map>

<script language="JavaScript"><!--
function changeContent(what,text) {
    if (document.all)
        document.all[what].innerHTML = text;
    else if (document.layers) {
        document.layers[what].document.open();
        document.layers[what].document.write(text);
        document.layers[what].document.close();
    }
}
//--></script>

<p>
<img src="image.gif" border=0 width=200 height=100 usemap="#image-map">

<layer id="layerName">
<span id="layerName">
Move the mouse pointer over this text
</span>
</layer>
</p>