What I'm wanting to do here is stack these images on top of one another using the z-index property and change the z-index to make the other images appear on top using the buttons. I tried to do this by setting the images all in the same spot and then use the javascript function to change the z-index properties of the images in accordance with the button. It's not a very beautiful way to do it but I can't think of another way besides using the visibility property. Would anyone be able to help me implement my view on how this should work. Can't really figure it out form here.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<center><img src="/tools/c_clamps.jpg" id="tool1" height="248" width="364" style = "position:absolute; z-index:1";></center>
<center><img src="/tools/crescent_wrench.jpg" id="tool2" height="248" width="364" style = "position:absolute; z-index:0";></center>
<center><img src="/tools/chisels.jpg" id="tool3" height="248" width="364" style = " position:absolute; z-index:-1";></center>
<script language="javascript" type="text/javascript">
<!--
//<![CDATA[
function select(picture){
if(picture == 1)
{
document.getElementByID("tool1").z-index:1;
document.getElementByID("tool2").z-index:0;
document.getElementByID("tool3").z-index:-1;
}
else if(picture == 2)
{
document.getElementByID("tool1").z-index:0;
document.getElementByID("tool2").z-index:1;
document.getElementByID("tool3").z-index:-1;
}
else if(picture == 3)
{
document.getElementByID("tool1").z-index:-1;
document.getElementByID("tool2").z-index:0;
document.getElementByID("tool3").z-index:1;
}
}
//]]>
//-->
</script>
<br/>
<div width="400" style="display: block;margin-left: auto;margin-right: auto;text-align: center">
<button type = "button" onclick="select(1);">Clamps</button>
<button type = "button" onclick="select(2);">Chisels</button>
<button type = "button" onclick="select(3);">C. Wrench</button>
</div>
</body>
</html>
I think the syntax should be :
document.getElementById("tool1").style.zIndex = 0;