Image 带有websocets的动态图片按钮

我有一个用于家庭自动化的网站，在那里我可以控制我的电视、灯光等

我想做的是将一张图片作为我电视机的按钮设置为“关闭”，当我按下它时，图片会改变并更新我运行的网页的每个实例（在我的电脑、笔记本电脑、平板电脑等上），并将图片设置为“打开”的电视

我希望你们能理解我想做什么——我很抱歉没有任何代码可以显示，我只是不知道从哪里开始，因为我对HTML和CSS没有太多经验

提前谢谢

编辑：

<button id="tv.is.on" onMouseDown="doSend('TV_ON', this)" data-action="tv.on" data-theme="b">På</button>
            <button id="tv.is.off" onMouseDown="doSend('TV_OFF', this)" data-action="tv.off">Av</button>

我有一个家庭自动化系统，它是建立在“Eventghost”程序上的——在这个程序中有一个插件，可以让你创建一个与该程序对话的网站。这允许我从我的网站控制我的灯光、电视、媒体中心等

这是我编辑过的“主窗口”的一张图片，显示了我想把东西放在哪里，如果这有帮助的话

正如你在这里所看到的，我想建立的是我的电视画面，显示屏幕是黑色的，然后当我按下所说的画面时，它会变成一个电视，上面有一些静电或类似的东西，并用websocket向eventghost发送一个命令。我甚至不知道

我确实设法让一些接近这一点的东西发挥作用，但没有图片，而是用改变颜色的按钮。代码如下：

<script language="javascript">

function init() { 
    var output = document.getElementById("container"); 
    var ip = location.host;
    //alert(location.host);
    var wSocket = new WebSocket("ws://"+ip);
    if (wSocket) {
        wSocket.onopen = function() {
            ws = wSocket;
            doSend("Watching_TV");
        }
        wSocket.onmessage = wsMessage;
        wSocket.onclose = function() {
            ws = null;
        }
    }
}




function doSend(strng) {
    if (ws != null) {
        ws.send(JSON.stringify(strng));
    }
}


function wsMessage(evt) {
    if (evt.data.match("tv on")) {
        document.getElementById("tv.is.on").style.backgroundColor="green";
        document.getElementById("tv.is.on").style.color ="white";
        document.getElementById("tv.is.off").style.backgroundColor="black";
        document.getElementById("tv.is.off").style.color ="white";
    }
    if (evt.data.match("tv off")) {
        document.getElementById("tv.is.on").style.backgroundColor="black";
        document.getElementById("tv.is.on").style.color ="white";
        document.getElementById("tv.is.off").style.backgroundColor="red";
        document.getElementById("tv.is.off").style.color ="white";
    }
}

window.addEventListener("load", init, false); 
</script> 

函数init（）{
var输出=document.getElementById（“容器”）；
var ip=location.host；
//警报（location.host）；
var wSocket=新的WebSocket（“ws://”+ip）；
if（wSocket）{
wSocket.onopen=函数（）{
ws=wSocket；
doSend（“看电视”）；
}
wSocket.onmessage=wsMessage；
wSocket.onclose=函数（）{
ws=null；
}
}
}
功能doSend（strng）{
如果（ws！=null）{
send（JSON.stringify（strng））；
}
}
功能wsMessage（evt）{
if（evt.data.match（“tv on”））{
document.getElementById（“tv.is.on”）.style.backgroundColor=“绿色”；
document.getElementById（“tv.is.on”）.style.color=“白色”；
document.getElementById（“tv.is.off”）.style.backgroundColor=“黑色”；
document.getElementById（“tv.is.off”）.style.color=“白色”；
}
if（evt.data.match（“电视关闭”））{
document.getElementById（“tv.is.on”）.style.backgroundColor=“黑色”；
document.getElementById（“tv.is.on”）.style.color=“白色”；
document.getElementById（“tv.is.off”）.style.backgroundColor=“红色”；
document.getElementById（“tv.is.off”）.style.color=“白色”；
}
}
addEventListener（“加载”，init，false）；

然后我的按钮中有这个：

<button id="tv.is.on" onMouseDown="doSend('TV_ON', this)" data-action="tv.on" data-theme="b">På</button>
            <button id="tv.is.off" onMouseDown="doSend('TV_OFF', this)" data-action="tv.off">Av</button>

På
影音

现在，我想做的是创建这些东西，但只在一张图片内，当你按下它时，它的状态会从打开和关闭改变（也就是说，当你点击它时，有两张图片会改变）-并让网站使用WebSocket更新页面的每个实例

---

我希望我现在说得更清楚，提前谢谢：）

请为您的问题添加更多技术细节。到目前为止，您只有一个页面可以发送命令，但您没有灯光和电视的状态反馈？非常抱歉，我第一次使用stackoverflow，所以我没有看到您的评论。我将添加更多信息@这是一个非常广泛的问题。对于第一部分，您只需要使用标记，而不是。对于websockets，我认为您需要通过一个教程或其他什么作为开始。。。