我是否正确编写了这些 HTML img 标签？

Question

我在这里想要做的是使用 z-index 属性将这些图像堆叠在一起，并使用按钮更改 z-index 以使其他图像显示在顶部。我尝试通过将所有图像设置在同一个位置然后使用 javascript 函数根据按钮更改图像的 z-index 属性来做到这一点。这不是一个非常漂亮的方法，但我想不出除了使用可见性属性之外的其他方法。谁能帮助我实现我对这应该如何运作的看法。无法从这里真正弄清楚。

     <!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>

Answer 1

您的javascript略有变化：

而不是：

document.getElementByID("tool1").z-index:1;

应该是：

document.getElementById("tool1").style.zIndex = 1;

修复所有这些问题，它可能会起作用！

Answer 2

我认为语法应该是：

 document.getElementById("tool1").style.zIndex = 0;

我是否正确编写了这些 HTML img 标签？

Did I write these HTML img tags correctly?

html

javascript

css

z-index