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

-1

我想在这里做的是使用z-index属性将这些图像堆叠在一起，并更改z-index使其他图像使用按钮显示在顶部。我试图通过将图像全部设置在相同的位置，然后使用javascript函数根据按钮来更改图像的z-index属性。这不是一个非常漂亮的方法，但除了使用可见性属性之外，我无法想到另一种方式。任何人都可以帮助我实现我的观点，这应该如何工作。在这里无法真正弄清楚它的形式。我是否正确编写了这些HTML img标签？

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

来源

2017-03-17 Michael DeMarco

注意它的['的document.getElementById（）']（https://developer.mozilla.org/en-US/docs/Web/API/Document /的getElementById）。此外，还有其他一些问题，例如'.z-index'不是您如何在JavaScript中访问该属性，因为'-'对属性名称无效，而需要使用'zIndex'。你使用'='分配，而不是'：'。 –

'zIndex'作为'node.style.zIndex'访问。 –

谢谢！我对这类东西还是比较新的，所以我发现自己犯了很多我找不到的错误。 –

我认为语法应为：

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

来源

2017-03-17 01:39:20

为你的JavaScript的细微变化：

相反的：

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

它应该是：

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

修复所有这些，它可能工作！

来源

2017-03-17 01:39:11

可能吗？那里信心十足！ –

您可以使用反引号或缩进来格式化答案中的代码。 –

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

回答

相关问题