-
Notifications
You must be signed in to change notification settings - Fork 0
/
ships.php
69 lines (60 loc) · 2.33 KB
/
ships.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!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=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";
//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 align="center">
<div id="image1">
<img src="siteimg/l1.gif" border="0" alt="Enterprise" style="height:225px;" />
</div>
<div id="image2" style="display:none">
<img src="siteimg/l4.gif" border="0" alt="Defiant" style="height:225px;" />
</div>
<div id="image3" style="display:none">
<img src="siteimg/l2.gif" border="0" alt="Voyager" style="height:225px;" />
</div>
<div id="image4" style="display:none">
<img src="siteimg/l3.gif" border="0" alt="Prometheus" style="height:225px;" />
</div>
<br><br><h5>
<a id="one" href="Enterprise" onclick="changeIt('image1'); return false">Enterprise</a> -
<a id="two" href="Defiant" onclick="changeIt('image2'); return false">Defiant</a> -
<a id="three" href="Voyager" onclick="changeIt('image3'); return false">Voyager</a> -
<a id="four" href="Prometheus" onclick="changeIt('image4'); return false">Prometheus</a>
</h5></div></body>
</html>