Mouseover function use

liunx · Jan 9, 2008

I am using the mouseover function to supersize thumbnail photos in a separate table with two rows of one cell each. The attached code works correctly to change the photo in the top row of the separate table. 
 
I now wish to enhance the code to also change an associated text caption in the second row to provide a correct caption for each new photo. This code is repeted in each thumbnail row/cell of the thumbnail table. 
 
The supersize table top row is named "big" and the bottom row is named "txt". 
 
Any thoughts? 
 
<a href=http://www.webdeveloper.com/forum/archive/index.php/# 
ONMOUSEOVER="big.src='http://www.geocities.com/ccbebs/pics3667r/Restorationpics/FrontSuspensionAfter.jpg'"> 
<IMG WIDTH=72 HEIGHT=64 
SRC=http://www.webdeveloper.com/forum/archive/index.php/"http://www.geocities.com/ccbebs/Images/72x64smalljpgs/FrontSuspensionAfterSMALL.jpg">Please post your whole code with the tables etc.code is too long so I edited out unrelated code. Url to view all in action is: <a class="postlink" href="http://www.geocities.com/ccbebs/TablemakerTesting.htm">www.geocities.com/ccbebs/TablemakerTesting.htm</a> 
 
<TABLE WIDTH="20%" BGCOLOR="#FFFFFF" ALIGN="left" CELLSPACING="1" CELLPADDING="1" BORDER="1"> 
<caption valign="top" align="center">Mouse Over to Supersize</caption> 
<TR><th> 
<a href=http://www.webdeveloper.com/forum/archive/index.php/# ONMOUSEOVER="big.src='URL FOR SUPERSIZED PHOTO HERE'"> 
<IMG WIDTH=72 HEIGHT=64 
SRC=http://www.webdeveloper.com/forum/archive/index.php/"URL FOR THUMBNAIL HERE"> 
</TH> 
<th> 
</TR> 
</TABLE> 
 
<TABLE WIDTH="520" TABLE HEIGHT=310 BGCOLOR="#FFFFFF" ALIGN="right" BORDER="3"> 
<caption valign="top" align="center">Supersized Picture</caption> 
 
*cell for photo* 
 
<TR><TH> 
<IMG WIDTH=520 HEIGHT=310 NAME="big" 
SRC=http://www.webdeveloper.com/forum/archive/index.php/"http://www.geocities.com/ccbebs/pics3667r/Restorationpics/ShinyStuffRemoved.jpg"> 
</TH></TR> 
 
* cell for caption * 
 
<TR><TD ALIGN=MIDDLE Font size="1"> 
Still need to put appropriate caption here??? 
</TD></TR> 
 
</table> 
</body> 
</html>Hope that's what you want: 
 
<script language=javascript> 
function changeText(NewTxt){ 
obj = document.getElementById("changetext"); 
obj.innerHTML = NewTxt; 
} 
</script> 
<style type="text/css"> 
 
</style> 
<TABLE WIDTH="20%" BGCOLOR="#FFFFFF" ALIGN="left" CELLSPACING="1" CELLPADDING="1" BORDER="1"> 
<caption valign="top" align="center">Mouse Over to Supersize</caption> 
<TR><th> 
<a href=http://www.webdeveloper.com/forum/archive/index.php/# ONMOUSEOVER="big.src='URL FOR SUPERSIZED PHOTO HERE';changeText('That is the new text for this picture')"> 
<IMG WIDTH=72 HEIGHT=64 SRC=http://www.webdeveloper.com/forum/archive/index.php/"URL FOR THUMBNAIL HERE"> 
</TH> 
<th> 
</TR> 
</TABLE> 
 
<TABLE WIDTH="520" TABLE HEIGHT=310 BGCOLOR="#FFFFFF" ALIGN="right" BORDER="3"> 
<caption valign="top" align="center">Supersized Picture</caption> 
 
*cell for photo* 
 
<TR><TH> 
<IMG WIDTH=520 HEIGHT=310 NAME="big" SRC=http://www.webdeveloper.com/forum/archive/index.php/"http://www.geocities.com/ccbebs/pics3667r/Restorationpics/ShinyStuffRemoved.jpg"> 
</TH></TR> 
 
* cell for caption * 
 
<TR><TD ALIGN=MIDDLE Font size="1"><div id="changetext" class="changetext"> 
Still need to put appropriate caption here???</div> 
</TD> 
</TR> 
</table>SWON you are da Man! 
 
The code you suggested worked correctly the first time. Somewhat unusual in this world. Thanks!

Mouseover function use

liunx

Guest