apipkin/gist:369058

## gistfile1.js
// start all zindex at 0
document.getElementById('image_one').style.zIndex = 0;
document.getElementById('image_two').style.zIndex = 0;
document.getElementById('image_three').style.zIndex = 0;


// storage for current node
var topImage = null;

function layers(newTop) {
    // if we have one on top... lets move it to the bottom
    if(topImage) {
        topImage.style.zIndex = 0;
    }

    // set new one on top
    topImage = document.getElementById(newTop);
    topImage.style.zIndex = 10;
}

/*
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.html
<!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('image_one');">Click to see Image One!</a></p>
<p><a href="#" id="two_click" onClick="layers('image_two');">Click to see Image Two!</a></p>
<p><a href="#" id="three_click" onClick="layers('image_three');">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.css
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;
}
	// start all zindex at 0
	document.getElementById('image_one').style.zIndex = 0;
	document.getElementById('image_two').style.zIndex = 0;
	document.getElementById('image_three').style.zIndex = 0;


	// storage for current node
	var topImage = null;

	function layers(newTop) {
	// if we have one on top... lets move it to the bottom
	if(topImage) {
	topImage.style.zIndex = 0;
	}

	// set new one on top
	topImage = document.getElementById(newTop);
	topImage.style.zIndex = 10;
	}

	/*
	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('image_one');">Click to see Image One!</a></p>
	<p><a href="#" id="two_click" onClick="layers('image_two');">Click to see Image Two!</a></p>
	<p><a href="#" id="three_click" onClick="layers('image_three');">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;
	}