时间戳

首页 > 解决方案 > 使用CSS单击按钮时无法更改图像

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

问题描述

我正在使用 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'); 但它不起作用，它改变了按钮的背景图像，而不是页面。

请帮助解决这个问题。

标签： javascripthtmlcssraspberry-pi3gpio

解决方案

推荐阅读