Live colour changing

Question

I have made a color changer. but now I want to add a form to it. if you change the dropdown it must show the color change directly. what is the best way to do this?

Below I have added my code for the color changer

 $im = b.gif;
    $index = imagecolorclosest ( $im,  128,128,128); // old color
    imagecolorset($im,$index,$color[0],$color[1],$color[2]); // new color

    $imgname = "result.gif";
    imagegif($im, $imgname ); // save image as gif
    imagedestroy($im);

Answer 1

If you do not want to use <input type="color" /> , you could use 3 <input type="range"> add change listeners to them and update the style of element you wish whenever one of them is changed. (The event change will trigger after you release the input, the event input will trigger whenever the value is changed, even if you are still holding the input). I made the coloring gets and sets using Object.defineProperty to make it easier to test.

 ["red", "green", "blue", "opacity"].forEach(function(colorType) { Object.defineProperty(this, colorType, { get: function() { return +document.querySelector("#" + colorType).value; } }); document.querySelector("#" + colorType).addEventListener("input", onChange); }); Object.defineProperty(this, "result", { set: function(newColor) { document.querySelector("#result").setAttribute("style", "background-color: rgba(" + newColor + ");"); } }); onChange(); function onChange() { result = [red, green, blue, opacity].join(", "); } 

 #result { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } 

 <form id="result"> <input type="range" id="red" name="red" min="0" max="255" /> <input type="range" id="green" name="green" min="0" max="255" /> <input type="range" id="blue" name="blue" min="0" max="255" /> <input type="range" id="opacity" name="opacity" min="0" max="1" step="0.01" /> </form> 

 Object.defineProperty(this, "color", { get: function() { return document.querySelector("#color").value; } }); document.querySelector("#color").addEventListener("input", onChange); Object.defineProperty(this, "result", { set: function(newColor) { document.querySelector("#result").setAttribute("style", "background-color: " + newColor + ";"); } }); onChange(); function onChange() { result = color; } 

 #result { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } 

 <form id="result"> <input type="color" id="color" name="color" /> </form>