Changing Images
This is my code but it fails to switch the images properly, dog.gif needs to replaced by dogpres.gif when image is clicked, cat.gif needs to be replaced by catpres.gif.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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>School Desktop PHP Edition</title> <link href="main.css" rel="stylesheet" type="text/css" /> <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] = "DogUn"; objId[1] = "DogPres"; objId[2] = "CatUn"; objId[3] = "CatPres"; 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 class="Container"> <div class="TopRow"> <div class="box" id="Dog"> <div id="DogUn"> <a id="one" href="#" onclick="changeIt('DogPres');"><img src="uploads/images/Password_System/dog.gif" border="0" alt="two" /></a> </div> <div id="DogPres" style="display:none"> <a id="two" href="#" onclick="changeIt('DogUn');"><img src="uploads/images/Password_System/dogpres.gif" border="0" alt="two" /></a> </div> </div> <span class="box" id = "Cat"> <div id="CatUn"> <a id="three" href="#" onclick="changeIt('CatPres');"><img src="uploads/images/Password_System/cat.gif" border="0" alt="two" /></a> </div> <div id="CatPres" style="display:none"> <a id="four" href="#" onclick="changeIt('CatUn');"><img src="uploads/images/Password_System/catpres.gif" border="0" alt="two" /></a> </div> </span> <span class="box" id = "Horse"><img src="uploads/images/Password_System/horse.gif" alt="Horse" width="100" height="100" /></span> <span class="box" id = "Cow"><img src="uploads/images/Password_System/cow.gif" alt="Cow" width="100" height="100" /></span> </div> <div class="BottomRow"> <span class="box" id = "Monkey"><img src="uploads/images/Password_System/monkey.gif" alt="Monkey" width="100" height="100" /></span> <span class="box" id = "Penguin"><img src="uploads/images/Password_System/penguin.gif" alt="Penguin" width="100" height="100" /></span> <span class="box" id = "Sheep"><img src="uploads/images/Password_System/sheep.gif" alt="Sheep" width="100" height="100" /></span> <span class="box" id = "Eleplant"><img src="uploads/images/Password_System/elephant.gif" alt="Elephant" width="100" height="100" /></span> </div> </div> <p> </p> </body> </html>
Currrently if you click dog, the cat dissapears as well, thanks for any help
CSS Codes
Reply With Quote
Bookmarks