i have a html cum javascript code.There is thumnail on the page .When somebody click the thumnail ,the full resolution of the same image would show and when click of full resolution the thumnail would show.It is going well with one thumanil of the page
when there are 2 thumanil on the same page,clicking on first thumnail shows the full resolution of the same but the 2nd thumnail is also showing at the back of full resolution.It looks like full resolution image is transparent..
Here is the code ,you can try it by running at your own computer.
<html>
<head>
<script>
window.onload = start;
function start ()
{
allSmall ();
allTriggers ();
}
function allTriggers ()
{
var images = document.getElementsByTagName("img");
for (var i = 0, image; image = images[i]; i++)
{
image.onclick = othersSmallThisLarge;
image.style.position = "absolute";
}
}
function smallImage (image)
{
with (image.style) { width = 50; height = 50; }
}
function largeImage (image)
{
with (image.style) { width = 500; height = 500; }
}
function switchSize (image)
{
if ( (image.offsetWidth != 500) && (image.offsetHeight != 500) )
{
largeImage (image);
}
else
{
smallImage (image);
}
}
function switchResolution (image)
{
var previous = image.src;
image.src = image.getAttribute("data");
image.setAttribute("data", previous);
delete previous;
}
function allSmall ()
{
var images = document.getElementsByTagName("img");
for (var i = 0, image; image = images[i]; i++)
smallImage (image);
}
function othersSmallThisLarge ()
{
switchResolution (this);
switchSize (this);
}
</script>
</head>
<body>
<images.style.position = "absolute">
<img src="thumnail'path" data="full resolution image'path " />
<img src="thumnail'path" data="full resolution image'path " />
</body>
</html>
Any suggestions ?
Thanx
