Question

我想在这里做的是使用z-index属性将这些图像堆叠在一起，并使用按钮更改z-index以使其他图像显示在顶部。我尝试通过将图像全部设置在同一位置来执行此操作，然后使用javascript函数根据按钮更改图像的z-index属性。这不是一个非常漂亮的方式，但除了使用visibility属性之外，我无法想到另一种方式。是否有人能够帮助我实现我应该如何工作的观点。无法在这里真正弄明白。

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

我认为语法应该是：

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

Answer 2

您的javascript略有变化：

而不是：

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

它应该是：

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

修复所有这些，它可能会有效！

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

2 个答案: