You are here: irt.org | FAQ | JavaScript | Image | Q437 [ previous next ]
Leaving aside the issue of tables and/or frames, this is possible in browsers that support the image object. Only Netscape Navigator 2 and Internet Explorer 3 do not support the image object in JavaScript. For these browsers we could either ignore this lack of support, but stop errors from occuring, or you could use frames.
When using tables and image swapping it is necessary to swap images using the image name rather then the index position of the image within the document. So when using tables:
<script language="JavaScript"><!--
function show(imageSrc) {
if (document.images) document.images['myImage'].src = imageSrc;
}
//--></script>
<table>
<tr><td><a href="apage.html" onMouseover="show('image1.gif')" onMouseout="show('blank.gif')">Show Image One</a></td>
<td rowspan="10"><img src="blank.gif" name="myImage" width="400" height="400"></td></tr>
<tr><td><a href="apage.html" onMouseover="show('image2.gif')" onMouseout="show('blank.gif')">Show Image Two</a></td></tr>
<tr><td><a href="apage.html" onMouseover="show('image3.gif')" onMouseout="show('blank.gif')">Show Image Three</a></td></tr>
<tr><td><a href="apage.html" onMouseover="show('image4.gif')" onMouseout="show('blank.gif')">Show Image Four</a></td></tr>
<tr><td><a href="apage.html" onMouseover="show('image5.gif')" onMouseout="show('blank.gif')">Show Image Five</a></td></tr>
<tr><td><a href="apage.html" onMouseover="show('image6.gif')" onMouseout="show('blank.gif')">Show Image Six</a></td></tr>
<tr><td><a href="apage.html" onMouseover="show('image7.gif')" onMouseout="show('blank.gif')">Show Image Seven</a></td></tr>
<tr><td><a href="apage.html" onMouseover="show('image8.gif')" onMouseout="show('blank.gif')">Show Image Eight</a></td></tr>
<tr><td><a href="apage.html" onMouseover="show('image9.gif')" onMouseout="show('blank.gif')">Show Image Nine</a></td></tr>
<tr><td><a href="apage.html" onMouseover="show('image10.gif')" onMouseout="show('blank.gif')">Show Image Ten</a></td></tr>
</table>When using Frames:
<frameset cols="200,*"> <frame src="tableFrame1.html" name="frameA"> <frame src="blank.gif" name="frameB"> </frameset>
tableFrame1.html:
<script language="JavaScript"><!--
function show(imageSrc) {
if (document.images) parent.frameB.location.href = imageSrc;
}
//--></script>
<table>
<tr><td><a href="apage.html" onMouseover="show('image1.gif')" onMouseout="show('blank.gif')">Show Image One</a></td></tr>
<tr><td><a href="apage.html" onMouseover="show('image2.gif')" onMouseout="show('blank.gif')">Show Image Two</a></td></tr>
<tr><td><a href="apage.html" onMouseover="show('image3.gif')" onMouseout="show('blank.gif')">Show Image Three</a></td></tr>
<tr><td><a href="apage.html" onMouseover="show('image4.gif')" onMouseout="show('blank.gif')">Show Image Four</a></td></tr>
<tr><td><a href="apage.html" onMouseover="show('image5.gif')" onMouseout="show('blank.gif')">Show Image Five</a></td></tr>
<tr><td><a href="apage.html" onMouseover="show('image6.gif')" onMouseout="show('blank.gif')">Show Image Six</a></td></tr>
<tr><td><a href="apage.html" onMouseover="show('image7.gif')" onMouseout="show('blank.gif')">Show Image Seven</a></td></tr>
<tr><td><a href="apage.html" onMouseover="show('image8.gif')" onMouseout="show('blank.gif')">Show Image Eight</a></td></tr>
<tr><td><a href="apage.html" onMouseover="show('image9.gif')" onMouseout="show('blank.gif')">Show Image Nine</a></td></tr>
<tr><td><a href="apage.html" onMouseover="show('image10.gif')" onMouseout="show('blank.gif')">Show Image Ten</a></td></tr>
</table>