]
06-01-2011, 04:51 AM
<html><head><title>JavaScript Sample</title><link href="style.css" rel="stylesheet" type="text/css" /><script language="javascript" type="text/javascript">// create an array to store the names of imagesvar myArr = new Array();myArr[0] = 'images/image1.jpg';myArr[1] = 'images/image2.jpg';myArr[2] = 'images/image3.jpg';myArr[3] = 'images/image4.jpg';myArr[4] = 'images/image5.jpg';// A global variablevar hiddenArrayIndex;// this function will change the image to the previous image// stored in the arrayfunction movePrevious(){ // get the value stored in the hidden field hiddenArrayIndex = document.getElementById('hiddenValue').value; // if the value is not 0 then decrement the value by 1 and // store it back into the hidden field. if(hiddenArrayIndex != 0) { document.getElementById('hiddenValue').value = parseInt(hiddenArrayIndex) - 1; // re-assign the value to the hiddenArrayIndex variable hiddenArrayIndex = document.getElementById('hiddenValue').value; } // set the background-image stored at the specified Array Index dynamically document.getElementById("div1").style.backgroundImage = "url(" + myArr[hiddenArrayIndex] + ")";}// this function will change the image to the next image// stored in the arrayfunction moveNext(){ // get the value stored in the hidden field hiddenArrayIndex = document.getElementById('hiddenValue').value; // if the value is not equal to the upper index of the array // then increment the value by 1 and store it back into the hidden field if(hiddenArrayIndex != (myArr.length - 1)) { document.getElementById('hiddenValue').value = parseInt(hiddenArrayIndex) + 1; // re-assign the value to the hiddenArrayIndex variable hiddenArrayIndex = document.getElementById('hiddenValue').value; } // set the background-image stored at the specified Array Index dynamically document.getElementById("div1").style.backgroundImage = "url(" + myArr[hiddenArrayIndex] + ")";}</script>