Page 1 of 1

Tips: Lampsymboler med hoover effekt

Posted: Fri Mar 17, 2023 9:45 am
by hekj
Med en specialdefinierad lampsymbol kan man få en hoover effekt då man för musmarkören över symbolen:

1) avsluta NexaHome

2) ladda hem testversion 2.3.3 eller senare

3) skapa filen demo2.html i "mywebserver" biblioteket enligt följande exempel:

Code: Select all

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head><title>NexaHome - Life Made Easy With Home Automation</title>
    <link rel="Shortcut Icon" href="http://nexahome.se/favicon32x32.ico">
    <meta http-equiv="refresh" content="60;#URL#?mypage=demo2&psw=#PSW#">

    <script type="text/javascript">

    if (document.images)
    {
       on = new Image();
       on.src = "#URL#/on.png";

       off = new Image();
       off.src = "#URL#/off.png";

       onoff = new Image();
       onoff.src = "#URL#/onoff.png";
       
       on150 = new Image();
       on150.src = "#URL#/on150.png";

       off150 = new Image();
       off150.src = "#URL#/off150.png";

       onoff150 = new Image();
       onoff150.src = "#URL#/onoff150.png";
    }

    function imgChange(name, image)
    {
        if (document.images)
        {
          if (image.indexOf("on.png") != -1) {
             document[name].src = eval("on.src");
             
          } else if (image.indexOf("off.png") != -1) {
             document[name].src = eval("off.src");

          } else if (image.indexOf("onoff.png") != -1) {
             document[name].src = eval("onoff.src");
             
          } else if (image.indexOf("on150.png") != -1) {
             document[name].src = eval("on150.src");
             
          } else if (image.indexOf("off150.png") != -1) {
             document[name].src = eval("off150.src");
             
          } else if (image.indexOf("onoff150.png") != -1) {
             document[name].src = eval("onoff150.src");
             
          } else {
             alert("Image not found: " + image);
          }
       }
    }

    function cmdTimeout(href)
    {
       cmd = href;
       setTimeout("cmdExec()", 1000);
    }

    function cmdExec()
    {
       if (cmd) {
          document.location.href = cmd;
       }
    }

    </script>

    </head>

    <!-- device="Kök (bord)" on="on.png" off="off.png" onoff="onoff.png" onhover="on150.png" offhover="off150.png" onoffhover="onoff150.png" -->
    <!-- device="Vardagsrum (gul)" on="on.png" off="off.png" onoff="onoff.png" onhover="on150.png" offhover="off150.png" onoffhover="onoff150.png"-->

    <body bgcolor="#ffffff" background="/nexahome/nexahome_bg.jpg">

    <img style="position:absolute;top:0px;left:0px" src="/nexahome/house_819_layout.png">

    <div style="position: absolute; top: 176px; left: 291px">
    <a href="#URL#?mypage=demo2&psw=#PSW#&device=#ID#Kök (bord)#&cmd=#CMD#Kök (bord)#&rnd=#RND#"
       onMouseOver='
          imgChange("device_#ID#Kök (bord)#", "#IMAGEHOVER#Kök (bord)#");
          cmdTimeout("#URL#?mypage=demo2&psw=#PSW#&device=#ID#Kök (bord)#&cmd=#CMD#Kök (bord)#&rnd=#RND#")'
       onMouseOut='imgChange("device_#ID#Kök (bord)#", "#IMAGE#Kök (bord)#")'>
    <img name="device_#ID#Kök (bord)#" src="#IMAGE#Kök (bord)#" border="0" alt="?"></a>
    </div>

    <div style="position: absolute; top: 205px; left: 105px">
    <a href="#URL#?mypage=demo2&psw=#PSW#&device=#ID#Vardagsrum (gul)#&cmd=#CMD#Vardagsrum (gul)#&rnd=#RND#"
       onMouseOver='imgChange("device_#ID#Vardagsrum (gul)#", "#IMAGEHOVER#Vardagsrum (gul)#")'
       onMouseOut='imgChange("device_#ID#Vardagsrum (gul)#", "#IMAGE#Vardagsrum (gul)#")'>
    <img name="device_#ID#Vardagsrum (gul)#" src="#IMAGE#Vardagsrum (gul)#" border="0" alt="?"></a>
    </div>

    <div style="position: absolute; top: 310px; left: 25px;">
    <form action="nexahome" method="get">
    <input type=hidden name="mypage" value="demo2">
    <input type=hidden name="psw" value="#PSW#">
    <input type=hidden name="rnd" value="#RND#">
    <input type=submit value="#TIMESTAMP#">
    </form>
    </div>

    </body>
    </html>
4) ändra till rätt namn på mottagare och bilder

5) starta NexaHome

6) öppna websidan demo2 och för muspekaren över de två mottagarna, en av mottagarna är definierad så att kommandot går iväg utan att man behöver klicka