Q703 How can I change the contents of a table cell when the mouse moves over an image in a form?

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

Its a bit messy, but it can be done:

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript"><!--
rowArray = new Array();
rowArray[0] = '<FORM><A HREF="#" onMouseOver="refreshTable(1)" onMouseOut="refreshTable(0)"><IMG SRC="image1.gif" WIDTH="100" HEIGHT="20" BORDER="0"></A>' +
              '<A HREF="#" onMouseOver="refreshTable(2)" onMouseOut="refreshTable(0)"><IMG SRC="image2.gif" WIDTH="100" HEIGHT="20" BORDER="0"></A><\/FORM>';
rowArray[1] = 'This is some text for row 1';
rowArray[2] = 'This is some text for row 2';

function refreshTable(x) {
    var output = '<TABLE><TR><TD>' + rowArray[0] + '<\/TD><\/TR>';
    if (x != 0)
        output += '<TR><TD>' + rowArray[x] + '<\/TD><\/TR>';
    output += '<\/TABLE>';

    if (document.all)
        document.all('myTable').innerHTML = output;
    else if (document.layers) {
        document.layers['myTable'].document.open();
        document.layers['myTable'].document.writeln(output);
        document.layers['myTable'].document.close();
    }
}
//--></SCRIPT>

</HEAD>

<BODY onLoad="refreshTable(0)">

<SPAN ID="myTable" STYLE="position:absolute"></SPAN>

</BODY>
</HTML>