Question

我正在使用Raspberry Pi开发网络控制的家庭自动化。我提到了以下链接 https://circuitdigest.com/microcontroller-projects/iot-raspberry-pi-home-automation

但是我正在自定义HTML，CSS页面。我已经开发了如下的HTML页面

<body>
    <h1 align=center>Web Based Controlled Home Automation using Raspberry Pi </h1>

    <div id="content" align="center"></div>
    <center><img src="/img/roomlighton.jpeg" height="500px" width="800px" id='pic1' /></center>
    <br / >

我为相同的脚本（.css）编写脚本（.js）和样式表我的.js文件如下

webiopi().ready(function() {
            webiopi().setFunction(4,"out");
            //webiopi().setFunction(18,"out");
            //webiopi().setFunction(22,"out");
            //webiopi().setFunction(23,"out");


            var content, button;
            content = $("#content");

            button = webiopi().createGPIOButton(4,"Room 1");
            content.append(button);

        /* $('content').click(function(){
                         $('#pic1').attr('src','/img/roomlightoff.png');
        });
        */

我的css文件如下

button {
                    display: block;
                    position: absolute;
                    margin: 40px 610px;
                    padding: 0 10px;
                    text-align: center;
                    text-decoration: none;
                    width: 130px;
                    height: 40px;
                    font: bold 18px/25px Arial, sans-serif;                 
                    color: black;


                text-shadow: 1px 1px 1px rgba(255,255,255, .22);
                -webkit-border-radius: 30px;
                -moz-border-radius: 30px;
                border-radius: 30px;

                -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
                -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
                box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);

                -webkit-transition: all 0.15s ease;
                -moz-transition: all 0.15s ease;
                -o-transition: all 0.15s ease;
                -ms-transition: all 0.15s ease;
                transition: all 0.15s ease;
        }

#gpio4.LOW {
                    background-color: Gray;
                    color: Black;
                    // background-image:url('/img/roomlightoff.png');
            }

            #gpio4.HIGH {
                    background-color: Red;
                    color: LightGray;
            }

工作正常。当前，当我单击按钮（＃gpio.HIGH /＃gpio.LOW）时，背景颜色会相应更改。但是问题是我也想同时更改图像源。单击按钮时，我想同时更改background-image的来源。现在，页面显示恒定图像。

我尝试了background-image:url('/img/roomlightoff.png'); 但它不起作用，它更改了按钮而不是页面的背景图像。

请帮助解决此问题。

使用CSS单击按钮时无法更改图像

0 个答案: