/gist:369053

## gistfile1.txt
var top = "image_one";

function layers(newTop) {
  domTop = document.getElementById('image_one').style;
  domNew = document.getElementById('image_two').style;

  domTop.zIndex = "0";
  domNew.zIndex = "10";
  top = newTop;


}

## gistfile2.txt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
  <title>Image Testing!</title>
    <link rel="stylesheet" type="text/css" href="test.css" />
    <script src="test.js" language="javascript" type="text/javascript"></script>
</head>

<body>
  <h1>Visible Image Layer Test!!</h1>

<div id="links">
<p><a href="#" id="one_click" onClick="layers(this);">Click to see Image One!</a></p>
<p><a href="#" id="two_click" onClick="layers(this);">Click to see Image Two!</a></p>
<p><a href="#" id="three_click" onClick="layers(this);">Click to see Image Three!</a></p>
</div>

<div id="img">
<img src="1.png" id="image_one" />
<img src="2.png" id="image_two" />
<img src="3.png" id="image_three" />
</div>


</body>
</html>

## gistfile3.txt
html {
background-color: gray;
}


#image_one {
position: absolute;
visibility: visible;
z-index: 1;
}

#image_two {
position: absolute;
visibility: visible;
z-index: 5;
}

#image_three {
position: absolute;
visibility: visible;
z-index: 15;
}
	var top = "image_one";

	function layers(newTop) {
	domTop = document.getElementById('image_one').style;
	domNew = document.getElementById('image_two').style;

	domTop.zIndex = "0";
	domNew.zIndex = "10";
	top = newTop;




	}
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html>

	<head>
	<title>Image Testing!</title>
	<link rel="stylesheet" type="text/css" href="test.css" />
	<script src="test.js" language="javascript" type="text/javascript"></script>
	</head>

	<body>
	<h1>Visible Image Layer Test!!</h1>

	<div id="links">
	<p><a href="#" id="one_click" onClick="layers(this);">Click to see Image One!</a></p>
	<p><a href="#" id="two_click" onClick="layers(this);">Click to see Image Two!</a></p>
	<p><a href="#" id="three_click" onClick="layers(this);">Click to see Image Three!</a></p>
	</div>

	<div id="img">
	<img src="1.png" id="image_one" />
	<img src="2.png" id="image_two" />
	<img src="3.png" id="image_three" />
	</div>



	</body>
	</html>
	html {
	background-color: gray;
	}



	#image_one {
	position: absolute;
	visibility: visible;
	z-index: 1;
	}

	#image_two {
	position: absolute;
	visibility: visible;
	z-index: 5;
	}

	#image_three {
	position: absolute;
	visibility: visible;
	z-index: 15;
	}