freshJet Posted July 20, 2011 Report Share 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 Link to comment Share on other sites More sharing options...
stuartpb Posted July 20, 2011 Report Share Posted July 20, 2011 Pretty good idea Quote Link to comment Share on other sites More sharing options...
James142 Posted July 20, 2011 Report Share Posted July 20, 2011 Looks great! Quote Link to comment Share on other sites More sharing options...
Moderators joeri Posted July 20, 2011 Moderators Report Share Posted July 20, 2011 hang on Copy /Pasting Quote Link to comment Share on other sites More sharing options...
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.