i have been trying to creat an image viewer onClick.i've managed to do it.but it works on reload everytime .the three image appears one by one after clicking on individual image and stop working till i reload the page.and even i reload ,if i click on the second image first,the first image doesn't appears on the screen.what i am trying to say is it works successively.how can i solve that

Code:
<html>
<head>
<title>javascript</title>
<style>
*{margin:0px;padding:0px;}

#floatright {
float:right;
width:180px;
height:500px;
border:1px solid;
padding:2px;
}
#imageone,#imagetwo,#imagethree{ 
float:right;
width:150px;
height:100px; 

}
body{
position:relative;}
#box{
position:relative;
float:right;
width:400px;
height:350px;
border:1px solid;
}
#sizeimg1,#sizeimg2,#sizeimg3{
width:400px;
height:350px;
}
#sizeimg1{
position:absolute;
top:0px;
right:300px;
}
#sizeimg2{
position:absolute;
top:0px;right:300px;
}
#sizeimg3{
position:absolute;right:300px;
top:0px;
}
</style>

<script language= "javascript"  type="text/javascript">

    function change(imag){ 
	var photo=document.getElementById(imag);
	photo.style.zIndex="200";

		 
		 }

  
</script>
</head >
<body>

<div id="floatright">
<img src="image1.jpg"   alt="pakhi"   id="imageone" onClick="change('sizeimg1');"  >
<img  src="image2.jpg"  alt="pakhi" id="imagetwo"    onClick="change('sizeimg2');"   >
<img src="image3.jpg"  alt="pakhi"   id="imagethree"  onClick="change('sizeimg3');"    >
</div>

<img src="image1.jpg"  id="sizeimg1">
<img src="image2.jpg"  id="sizeimg2" >
<img src="image3.jpg"   id="sizeimg3">

</body>
</html>