|
Q437 How can I have text links in a table that show different images to the left of the links when the mouse pointer moves over them?
irt.org | Knowledge Base | JavaScript | Image | Q437 [ previous next ]
Q437 How can I have text links in a table that show different images to the left of the links when the mouse pointer moves over them?
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>
|
Feedback on 'Q437 How can I have text links in a table that show different images to the left of the links when the mouse pointer moves over them?'
|
|
Copyright © 1996-2009 irt.org, All Rights Reserved.