hola a todos , tengo este script de java , que quiero modificarle los botones , el script tiene botones ON/OFF , pero queria cambiarle los colores , que cuando toque el ON se ponga en verde , y el otro se quede en color neutral , y cuando toque el OFF , se ponga en rojo , y el otro cambie a color neutral .... yo logre cambiarlo pero a colores fijos

otra cosa como puedo agregarle especie de un tab arriba que una parte salgan los botones y el otro tab , salga para edit el ip , para no tener que estar entrando a modifcar el ip dentro del script

Código Javascript :

    <html>
    <head>
    <title>Web X10der</title>
    
    <!-- version 2.0a  9/6/2010 -->
    <script type="text/JavaScript" language="JavaScript">
    <!--
    // XXX: This script is known not to work with the Opera Mini mobile browser.
    var version = "2.0";
    // Some constants to make the code a little more readable.
    var NODIM = 0, DIM = 1, PLC = 0, RF = 1;

    // ********************** START EDITING HERE ***************************

    // Host name or IP address of the machine running the X10 Commander server
    // You MUST edit this.
    var server = "172.16.0.3";

    // You MUST edit the devices array to match your setup.
    //
    // Devices array contains 4 entries per device.
    // 1. Device address (house code & unit number)
    // 2. Device name to display
    // 3. Device dimability - NODIM or DIM
    // 4. X10 transmission method - PLC (power line) or RF (radio frequency)
    var devices = new Array(
        
        "E1",    "ALL LIGHTS",          NODIM,  PLC,
        "E2",    "DINNER ROOM",       DIM,    PLC,
        "E3",    "KITCHEN",      NODIM,    PLC,
        "E4",    "OFFICE", NODIM,    PLC,
        "E5",    "LIGHT PATIO",          NODIM,    PLC,
        "E6",    "HALL",   NODIM,    PLC,
        "E7",    "DINNER TABLE LAMP", DIM,  PLC,
        "E8",    "STAIRS",       NODIM,  PLC,
        "E9",    "BATHORROM", NODIM,    PLC,
        "E10",    "PORTAL",    NODIM,  PLC,
        "E11",    "MOTIF WALL",  NODIM,    PLC,
        "E12",    "FAN PATIO",   NODIM,  PLC,
        "E",    "NADA",    NODIM,    PLC,
        "I2",    "ROOM MASTER",   NODIM,    PLC,
        "I3",    "SMALL ROOM",   NODIM,    PLC,
        "I4",    "SHOWER ROOM",  NODIM,    PLC,
        "I5",    "CLOSET MASTER",   NODIM,    PLC,
        "I6",    "BATH MASTER",   NODIM,    PLC,
        "I7",    "BALCONY",   NODIM,    PLC,
        
        // Devices array ends with a special token so we do not have to worry about
        // that last trailing comma when items get rearranged. Do not change it.
        "END"
    );

    // Some global flags to customize script behavior.
    // You don't have to change them unless you don't like the standard behavior.
    //
    // Personalize the page heading any way you like by changing myHeading (nombre de la pagina)
    var myHeading = "Home Control";
    // Set showServer to false to omit showing the server name or address on page (mostrar direccion server)
    var showServer = false;
    // Set shortButtons to true to omit Dim/Bright percentages from button labels (good for mobile devices) (muestra porcentaje)
    var shortButtons = true;
    // Set percentage to dim BY with Dim buttons. Default of 50 seems good.
    // Understand that "DIM 25" means to dim by 25%, not dim to 25%.
    var dimPercent = 50;
    // Set percentage to brighten TO with Bright buttons. Default of 100 seems good.
    // Understand that "BRIGHT 75" means to brighten to 75%, not brighten by 75%.
    var brightPercent = 100;
    // Set showCodes to true to show device X10 addresses & transmit methods as well as names on page (muestra direccion x10)
    var showCodes = false;
    // Set showStatus to false to disable browser status line updating
    var showStatus = false;
    // Set showHovertext to false to not show hovertext.
    // Some broswers put this in the status line, distractingly, instead of as hovertext.
    var showHovertext = false;

    // Some global flags to control how the HTTP command is sent.
    // Change these if you have problems with the standard configuration.
    //
    // Set useAjax to false only if it consistently fails.
    var useAjax = true;
    // Sometimes an exception will be thrown but the command will succeed anyway.
    // If this happens all the time, you can change allowFallback and allowErrorAlert
    // to false.
    var allowFallback = true; // set to false to disable fallback to window.open() if AJAX throws an exception
    var allowErrorAlert = true; // set to false if you get error pop-ups and don't want to see them

    // If you are running this via the http: protocol, and your HTTP server needs
    // a user ID and password for authentication, set them here. Just leave them
    // empty unless you get authentication errors or prompts from your HTTP server.
    // XXX: this is untested. Kindly report authentication problems to the author.
    var serverID = "";
    var serverPassword = "";

    // Set debug to true to show debug output in a popup window. Not for general use.
    var debug = false;

    // ********************** STOP EDITING HERE ****************************
    // *********************** THIS MEANS YOU! *****************************

    // Connect to the X10 Commander server by opening a window.
    // The AJAX method should be preferred.
    function windowMethod(url, closeIt) {
        if (closeIt) {
            var w = window.open(url, "X10Window",
              "dependent,height=1,width=1,location=no,menubar=no,scrollbars=no,status=no,toolbar=no");
            // Immediately close the window.
            w.close();
        }
        else {
          window.open(url, "X10Window",
            "dependent,height=100,width=100,location=yes,menubar=no,scrollbars=no,status=yes,toolbar=no");
        }
    }

    // Connect to the X10 Commander server via AJAX.
    function ajaxMethod(url) {
        try {
            // Send HTTP GET without opening a window.
            var request = new XMLHttpRequest();
            request.open("GET", url, true, serverID, serverPassword);


            request.send(null);
        }
        catch (e) {
            // Request threw an exception. This does not necessarily mean it failed.
            var err = e; // bring error into scope so it can be examined in debugger
            if (allowErrorAlert) {
                // Show the error message.
                var errString;
                if (typeof(err) == "string") {
                    errString = err;
                }
                else {
                    errString = err.toString();
                    if (errString == null || errString == "" || errString == "[object Error]")
                        errString = err.name + ": " + err.message;
                }
                if (err.message.match(/Access is denied/))
                    // Probably an IE security error.
                    errString += "\nMake sure the server " + location.hostname +
                      " is in your local intranet or other trusted zone.";
                else if (err.message.match(/Security violation/))
                    // Probably an Opera security error.
                    errString +=
                      "\n\nSet \"useAjax\" to \"false\" in the Web X10der script source code \
    because it will always fail with your browser (probably Opera).";
                alert(errString);
            }
            if (allowFallback)
                // Revert to using a browser window to send the command.
                windowMethod(url, true);
        }
    }

    // Turn a device on or off, or brighten or dim it.
    function setDevice(deviceNum, state, transmitMethod) {
        // if (debug) alert("setDevice(" + deviceNum + ", " + state + ", " + transmitMethod + ");");
        // Do not change the 8086 or the funny characters in the url string.
        // X10 Commander server requires them as is.
        var url = "http://" + server + ":8086/?x10command=DEVICE~send" +
            transmitMethod + "~\"" + devices[deviceNum] + " " + state + "\"";
        // Kludge: append timestamp to URL to force IE to open it every time.
        // Other browsers don't seem to need this.
        var today = new Date;
        url += "&time=" + today.getTime();
        if (debug)
            // Open a window, leaving it open to show the command sent and the response received.
            windowMethod(url, false);
        else if (useAjax)
            // Use the AJAX method.
            ajaxMethod(url);
        else
            // Use the window.open() method.
            windowMethod(url, true);
        if (showStatus)
            window.status = devices[deviceNum+1] + " set to " + state + " via " +
              transmitMethod.toUpperCase();
    }

    // Function to generate the HTML for the page full of buttons.
    function generate() {
        var s; // string accumulator
        // Write some text.
        
        if (myHeading != null && myHeading != "") document.writeln("<h1 style='color:red;position:relative;left:100px;top:0px;'>" + myHeading + "</h1>");
        if (showServer) document.writeln("<h5>Server: " + server + "</h5>");
        // Write a table, one row per X10 device.
        document.writeln("<table>");
        for (var i = 0; devices[i] != "END"; i += 4) {
            var lcMethod, ucMethod; // lowercase & uppercase transmission methods
            if (devices[i+3] == RF) { lcMethod = "\"rf\""; ucMethod = "RF"; }
            else { lcMethod = "\"plc\""; ucMethod = "PLC"; }
            // Show the device name.
            document.write("<tr><td>" + devices[i+1] + "</td>");
            // Show the device address if user wants to see it.
            if (showCodes)
                document.write("<td>(" + devices[i] + " " + ucMethod + ")</td>");
            // Add Off , On Buttons
            s = "<td><button type='button' style='background-color: #cc0000; color: #ffffff;'";
            if (showHovertext) s += " title='" + devices[i] + " OFF " + ucMethod + "'";
            s += " onClick='setDevice(" + i + ", \"OFF\", " + lcMethod +
              ");'>&nbsp;&nbsp;Off&nbsp;&nbsp;</button></td>"
            document.write(s);
            s = "<td><button type='button' style='background-color: #00cc00; color: #000000;'";
            if (showHovertext) s += " title='" + devices[i] + " ON " + ucMethod + "'";
            s += " onClick='setDevice(" + i + ", \"ON\", " + lcMethod +
              ");'>&nbsp;&nbsp;On&nbsp;&nbsp;</button></td>"
            document.write(s);
           
            // If device is dimmable...
            if (devices[i+2] == DIM) {
                // ... add Dim button...
                s = "<td><button type='button'";
                if (showHovertext)
                    s += "title='" + devices[i] + " DIM " + dimPercent + " " + ucMethod + "'";
                s += " onClick='setDevice(" + i + ", \"DIM " + dimPercent + "\", " +
                  lcMethod + ");'>&nbsp;Dim";
                if (! shortButtons) s += " " + dimPercent + "%";
                s += "&nbsp;</button></td>";
                document.write(s);
                // ... and Bright button
                s = "<td><button type='button'";
                if (showHovertext)
                    s += "title='" + devices[i] + " BRIGHT " + brightPercent + " " + ucMethod + "'";
                s += " onClick='setDevice(" + i + ", \"BRIGHT " + brightPercent + "\", " +
                  lcMethod + ");'>&nbsp;Bright";
                if (! shortButtons) s += " " + brightPercent + "%";
                s += "&nbsp;</button></td>";
                document.write(s);
               
              
            }
            document.writeln("</tr>");
        }
        document.writeln("</table>");
        if (showStatus)
            window.status = "Thanks for using Web X10der v" + version;
    }
     
            
    // -->
    </script>
    
    </head>

     
     <body bgcolor="#A9A9A9">       
     
    
    
    <script type="text/JavaScript" language="JavaScript">
    <!--
    generate();
    // -->
    </script>
    <noscript>
    <h3>You must have JavaScript enabled to use this page.</h3>
    </noscript>
    <!-- vim: set tabstop=4 shiftwidth=4 expandtab lines=44 columns=120: -->
    </body>
    
    </html>