freshJet Posted July 20, 2011 Report Posted July 20, 2011 What do you all think? I love the Switch to Europe/UK feature! http://www.freshjetvirtual.com/index.php/pages/routemap Here's the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Image Change Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> function changeIt(objName) { //The image object accessed through its id we mentioned in the DIV block which is going to be visible currently var obj = document.getElementById(objName); //An array that hold the IDs of images that we mentioned in their DIV blocks var objId = new Array(); //Storing the image IDs into the array starts here objId[0] = "image1"; objId[1] = "image2"; objId[2] = "image3"; objId[3] = "image4"; objId[4] = "image5"; //Storing the image IDs into the array ends here //A counter variable going to use for iteration var i; //A variable that can hold all the other object references other than the object which is going to be visible var tempObj; //The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the //only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part //of the if statement within this loop. for(i=0;i<objId.length;i++) { if(objName == objId[i]) { obj.style.display = "block"; } else { tempObj = document.getElementById(objId[i]); tempObj.style.display = "none"; } } return; } </script> </head> <body> <div id="image1"> <img src="1.jpg" border="0" alt="one" /> </div> <div id="image2" style="display:none"> <img src="2.jpg" border="0" alt="two" /> </div> <div id="image3" style="display:none"> <img src="3.jpg" border="0" alt="three" /> </div> <div id="image4" style="display:none"> <img src="4.jpg" border="0" alt="four" /> </div> <div id="image5" style="display:none"> <img src="5.jpg" border="0" alt="five" /> </div> <br><br> <a id="one" href="#" onclick="changeIt('image1');">one</a> <a id="two" href="#" onclick="changeIt('image2');">two</a> <a id="three" href="#" onclick="changeIt('image3');">three</a> <a id="four" href="#" onclick="changeIt('image4');">four</a> <a id="five" href="#" onclick="changeIt('image5');">five</a> </body> </html> 1 Quote
Moderators joeri Posted July 20, 2011 Moderators Report Posted July 20, 2011 hang on Copy /Pasting Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.