Bring front,bring back images

How to do bring front,bring back an images using javascript.plz tell the logic.

By ‘bring front’, do you mean change their z-index? If so, you could try something like this:


<input type="button" value="Image One Front" onclick="changeZ('img1');" />
<input type="button" value="Image Two Front" onclick="changeZ('img2');" />
<img id="img1" src="media/imageOne.jpg" />
<img id="img2" src="media/imageTwo.jpg" />

Just for the sake of overlapping the images, I added a CSS rule to img:


img { position: fixed; left: 0px; top: 40px; }

And finally the JS:


function changeZ(id) {
	var obj = document.getElementById(id);
	obj.style.zIndex += 1;
}