Q313 Using an Image Map and mouse overs is there a way to highlight that clicking the image will actually do something, other than using status messages?

You are here: irt.org | FAQ | DHTML | Q313 [ previous next ]

With Netscape Navigator 4 and Internet Explorer 4 you could use a layer to highlight text to the user:

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript"><!--
text1a = '<FONT FACE="ARIAL" COLOR="#FF0000">Some Red Text<\/FONT>';
text1b = '<FONT FACE="ARIAL" COLOR="#00FF00">Some Green Text<\/FONT>';
text1c = '<FONT FACE="ARIAL" COLOR="#0000ff">Some Blue Text<\/FONT>';

function changeit(layer,replaceText) {
    if (document.layers) {
        document.layers[layer].document.open();
        document.layers[layer].document.writeln(replaceText);
        document.layers[layer].document.close();
    }
    else if (document.all) {
        document.all(layer).innerHTML= replaceText;
    }
}
//--></SCRIPT>

</HEAD>
<BODY>

<MAP NAME="image-map">
<AREA SHAPE="RECT" COORDS="15,15,85,85" HREF="javascript:alert('red')"
   onMouseOver="changeit('layerID',text1a)" onMouseOut="changeit('layerID','')">
<AREA SHAPE="RECT" COORDS="93,15,110,85" HREF="javascript:alert('green')"
   onMouseOver="changeit('layerID',text1b)" onMouseOut="changeit('layerID','')">
<AREA SHAPE="CIRCLE" COORDS="150,50,35" HREF="javascript:alert('blue')"
   onMouseOver="changeit('layerID',text1c)" onMouseOut="changeit('layerID','')">
</MAP>

<SCRIPT LANGUAGE="JavaScript"><!--
if (document.layers)   document.write('<LAYER NAME="layerID"><\/LAYER><P><BR>');
else if (document.all) document.write('<DIV ID="layerID"><\/DIV>');
//--></SCRIPT>

<IMG NAME="boxImage" SRC="white.gif" BORDER=0 WIDTH=200 HEIGHT=100 USEMAP="#image-map">

</BODY>
</HTML>

With older browsers this will not work, and you may want to consider highlighting portions of the image. Take a look at the article Image Maps.