Entry

how can i change an image in a different table cell on onclick event?

May 5th, 2001 05:21
Colin Fraser, abba kuyenov,

For starters you have to build the table in javascript for a script to 
affect any cell. Try this : 
Create 2 images, one black one blue, little 1cm squares then :   
Preload the images into a cache
<SCRIPT>
	if (document.images) { 
		squareBlack = new Image 
		squareBlue = new Image
		squareBlue.src="blue.gif"
		squareBlack.src="black.gif"
	}  //end if
/*The below function performs the actual rollovers in the 
document and appears AFTER the above code*/
function chgImage (imgName,newImg ) {
	if (document.images) {
		document[imgName].src=eval(newImg+".src")
	}  //end if
} //end function
</SCRIPT>
Then in the body of the document try
<SCRIPT>
document.write(" <p><table width=25% border=1>")
document.write(" <tr><td align=center>")
document.write("<a href=javascript:void 
onClick=chgImage('pic0','squareBlack') 
onMouseOut=chgImage('pic0','squareBlue')> Change Images</a>")
document.write(" </td><td>")
document.write(" <img src='blue.gif' border=0 name='pic0' alt='going 
nowhere'>")
document.write(" </td></tr>")
document.write(" </td></tr>")
document.write(" </table>")
</SCRIPT>
The key here is the table is created on JavaScript, so the function will 
run. If you create the table in HTML, the script will fail. I suspec 
this relates to the inherent dynamism of a JavaScript as opposed to the 
very static nature of HTML.