This is probably the most common use of Javascript. There are countless ways
to get this working, but I present one that I use frequently. This script like
many of my other ones rely on numbered image files. Make images with names such
as org0.jpg, org1.jpg and org2.jpg. These would be initially displayed. Get 3
more files named new1.jpg, new2.jpg and 3.jpg which would be the files displayed
when the mouse is over the original images.
<SCRIPT LANGUAGE = "JavaScript">
<!--
function new_img(no){
document.images[no].src="new"+no+".jpg";
}
function org_img(no){
document.images[no].src="org"+no+".jpg";
}
-->
</SCRIPT>
<BODY>
<IMG SRC="org0.jpg" onMouseOver="new_img(0)" onMouseOut="org_img(0)">
<IMG SRC="org1.jpg" onMouseOver="new_img(1)" onMouseOut="org_img(1)">
<IMG SRC="org2.jpg" onMouseOver="new_img(2)" onMouseOut="org_img(2)">
</BODY>
Alternatively in case you want to change an image when clicked on it use the
following script
<SCRIPT LANGUAGE = "JavaScript">
<!--
function change_img(index){
document.images[index].src = "N.jpg";
}
-->
</SCRIPT>
<BODY>
<A HREF="JavaScript: change_img(0)"><IMG SRC="I.jpg"></A>
</BODY>