我是否正確編寫了這些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標籤？

回答

相關問題