Did I write these HTML img tags correctly?
Question
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>
2 answers
solution1
2 ACCPTED 2017-03-17 01:39:20
我认为语法应该是：
document.getElementById("tool1").style.zIndex = 0;
solution2
0 2017-03-17 01:39:11
slight changes for your javascript:
Instead of:
document.getElementByID("tool1").z-index:1;
it should be:
document.getElementById("tool1").style.zIndex = 1;
Fix all those, it might work!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.