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>
Comments