T
Traveller©
(sorry. this got x-posted)
My intention was to have a map as background and on mouseclick (or whatever)
displaying 1 of the trips we've made with the posibility to display 2 or more
trips on the same background. The images (img1, img2 etc) were made with a
transparent background, but for some reason the images are not superimposed but
replace each other. What did I miss?
<!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)
{
obj.style.display = "block";
}
else
{
tempObj = document.getElementById(objId);
tempObj.style.display = "none";
}
}
return;
}
</script>
<style type=text/css">
body {background-color: red;}
</style>
</head>
<body>
<div id="image1">
<img src="reizendooramerika/images/img1.gif" border="0" alt="one" />
</div>
<div id="image2" style="display:none">
<img src="reizendooramerika/images/img2.gif" border="0" alt="two" />
</div>
<div id="image3" style="display:none">
<img src="peizendooramerika/images/img3.gif" border="0" alt="three" />
</div>
<div id="image4" style="display:none">
<img src=reizendooramerika/images/img4.gif" border="0" alt="four" />
</div>
<div id="image5" style="display:none">
<img src="peizendooramerika/images/img5.gif" 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>
My intention was to have a map as background and on mouseclick (or whatever)
displaying 1 of the trips we've made with the posibility to display 2 or more
trips on the same background. The images (img1, img2 etc) were made with a
transparent background, but for some reason the images are not superimposed but
replace each other. What did I miss?
<!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)
{
obj.style.display = "block";
}
else
{
tempObj = document.getElementById(objId);
tempObj.style.display = "none";
}
}
return;
}
</script>
<style type=text/css">
body {background-color: red;}
</style>
</head>
<body>
<div id="image1">
<img src="reizendooramerika/images/img1.gif" border="0" alt="one" />
</div>
<div id="image2" style="display:none">
<img src="reizendooramerika/images/img2.gif" border="0" alt="two" />
</div>
<div id="image3" style="display:none">
<img src="peizendooramerika/images/img3.gif" border="0" alt="three" />
</div>
<div id="image4" style="display:none">
<img src=reizendooramerika/images/img4.gif" border="0" alt="four" />
</div>
<div id="image5" style="display:none">
<img src="peizendooramerika/images/img5.gif" 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>