<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> &nbsp; <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