更改圖片來源

Question

Hy只是無法使其工作

function changeImage()
{
    element=document.getElementById("myimage")
    if (element.src.match("bulb_on"))
    {
        element.src="bulb_off.jpg";
    }
    else
    {
        element.src="bulb_on.jpg";
    }
}

效果很好，但我嘗試在更換燈泡時也消失了black.jpg。 在bulboff上，屏幕上方有一個黑色img，在燈泡上，我希望黑色圖像消失或改為透明放置。

您知道我的意思是，在bulboff上有一個黑屏，在bulbon上有黑色img（黑屏）消失，當消失時，bulbon仍然可見並且博客內容。 再次在bulbon上單擊顯示的bulbof，然后黑屏，僅顯示bulboff。

    <img src="black.jpg" width="100%" height="100%">
    <div id="div"></div>
    <div id="bulb"><img src="bulb_off.jpg" id="myimage" onClick="changeImage()" width="100px" height="180px">

沒有太多代碼，有可能嗎？ 謝謝

Answer 1

您不需要黑色圖像。 一個div就足夠了：

<div id="black"></div>

為此，制作一個CSS：

div#black {
    background-color: black;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 100;
}

現在，只需設置它的display ，以block時，你希望它可見或none ，當你想隱藏它。

更復雜的是，您可能希望為“ black” div “亮”和“滅”狀態創建CSS類，並僅更改類，而不是display和其他可能要更改的屬性。