cdoverlaw
05-18-2008, 01:17 PM
<!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>
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.
Currrently if you click dog, the cat dissapears as well, thanks for any help
<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>
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.
Currrently if you click dog, the cat dissapears as well, thanks for any help