Q1033 How can I change the contents in one particular layer when the mouse moves over an image, where the contents should be called in from an external *.js file?

You are here: irt.org | FAQ | JavaScript | Source | Q1033 [ previous next ]

Try the following:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" SRC="library.js"></SCRIPT>
</HEAD>
<BODY>

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

<A HREF="nextpage.htm" onMouseOver="changeit('layerID',text1)" onMouseOut="changeit('layerID','')"><IMG SRC="image.gif" BORDER="0" WIDTH="100" HEIGHT="100"></A>

<A HREF="nextpage.htm" onMouseOver="changeit('layerID',text2)" onMouseOut="changeit('layerID','')"><IMG SRC="image.gif" BORDER="0" WIDTH="100" HEIGHT="100"></A>

<A HREF="nextpage.htm" onMouseOver="changeit('layerID',text3)" onMouseOut="changeit('layerID','')"><IMG SRC="image.gif" BORDER="0" WIDTH="100" HEIGHT="100"></A>

</BODY>
</HTML>

And then in library.js:

text1 = '<FONT FACE="ARIAL" COLOR="#FF0000">Some Red Text<\/FONT>';
text2 = '<FONT FACE="ARIAL" COLOR="#00FF00">Some Green Text<\/FONT>';
text3 = '<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;
    }
}