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也会消失。在灯泡上，屏幕上有一个黑色img，在灯泡上我想要黑色图像消失或者在它上面透明。

你知道我的意思，在灯泡上有一个黑色的屏幕，在黑色的img（黑色屏幕）上消失，当它消失的时候，仍然可以看到bulbon和博客的内容。再次使用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">

没有太多代码可以吗？感谢

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。

更复杂的是，您可能想要为“黑色”div的“灯亮”和“灯亮”状态创建CSS类，只需更改类，而不是display以及您可能想要更改的任何其他属性。

更改图像src

1 个答案: