<![CDATA[
<HTML>
<HEAD>
<TITLE>Changing Images</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--HIDE FROM NON-JS BROWSERS
var count=1; //initialise the image counter to 1
function nextPic() { // Define a function to move get the next image
if (count < 3) { // There will be three images
count ++ // Add 1 to the counter
document.display.src=count+".jpg"; //Show the image called countervalue.jpg
} else {
count=1 // when the counter is 3 go back to 1
document.display.src="1.jpg";
}
}
function prevPic() { // Define a function to get the previous image
if (count >1) {
count -- // Subtract 1 from the counter
document.display.src=count+".jpg";
} else {
count=3 // When the counter is 1 go to 3
document.display.src="3.jpg";
}
}
<!--END HIDE-->
</SCRIPT>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF">
<CENTER>
<STRONG><FONT SIZE="5">Changing Images</FONT></STRONG>
<P>
<IMG NAME="display" WIDTH="180" HEIGHT="180" SRC="1.jpg">
<P>
<!--NOTE THAT YOU CAN CALL A JAVASCRIPT FUNCTION FROM A LINK-->
<A HREF="javascript: prevPic()"
onMouseOver="prev.src = 'prev2.gif';"
onMouseOut="prev.src = 'prev1.gif';">
<IMG NAME="prev" SRC="prev1.gif" BORDER="0" WIDTH="88" HEIGHT="23"></A>
<A HREF="javascript: nextPic()"
onMouseOver="next.src = 'next2.gif';"
onMouseOut="next.src = 'next1.gif';">
<IMG NAME="next" SRC="next1.gif" BORDER="0" WIDTH="53" HEIGHT="22"></A>
</BODY>
</HTML>
]]>
return to example