0

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 也会消失。在灯泡关闭时，屏幕上有一个黑色的图像，在灯泡打开时，我希望黑色图像消失，或者在它上面放一个透明的。

你知道我的意思，在bulbonoff 上有一个黑屏，在bulbon 上黑色img（黑屏）消失，当它消失时，bulbon 仍然可见并且博客内容。再次在灯泡上单击灯泡显示而不是黑屏，只有灯泡关闭是可见的。

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

如果没有太多代码，这可能吗？谢谢

4

1 回答 1

0

您不需要黑色图像。一个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想要隐藏它的时间。

更复杂的是，您可能希望为“黑色”的“开灯”和“关灯”状态创建 CSS 类，div然后只更改类，而不是display更改您可能想要更改的任何其他属性。

于 2013-05-27T19:25:39.120 回答