iconButton that behaves like a checkBox

For anyone wondering, this is the code I ended up using ( I'm really not a coder, so this might not be the best way to do it, the best way is probably with an object or an array including all of the images )

It's basically an image, that by default is clicked and you can click on it to turn it on or off. It also detects when the mouse is over the button to put an image that looks like it's selected.



* Make sure you use the actual path to the image, not a binary string because it won't work *

var thisFolder = File($.fileName).path

// MY STYLES
var myStylesNotClicked = File(""+thisFolder+"/Styles/Images/MyStylesNotClicked.png");
var myStylesMouseOver = File(""+thisFolder+"/Styles/Images/MyStylesMouseOver.png");
var myStylesClicked = File(""+thisFolder+"/Styles/Images/MyStylesClicked.png");
var myStylesClickedMouseOver = File(""+thisFolder+"/Styles/Images/MyStyleClickedMouseOver.png");

var bool = true;

var image2 = group1.add("image", undefined, File.decode(myStylesClicked), {name: "image2"}); 
    image2.addEventListener("mouseover", image2MouseOver, false);
    image2.addEventListener("mouseout", image2MouseOut, false);
    image2.addEventListener("click", image2Click, false);

    function image2MouseOver() {
        if (bool == true) {
            updateImage(image2, myStylesClickedMouseOver);
        } else {
            updateImage(image2, myStylesMouseOver);
        }
    }
    function image2MouseOut() {
        if (bool == true) {
            updateImage(image2, myStylesClicked);
        } else {
            updateImage(image2, myStylesNotClicked);
        }
    }
    function image2Click() {
        if (bool == true) {
            bool = false;
            updateImage(image2, myStylesMouseOver);
        } else {
            updateImage(image2, myStylesClickedMouseOver);
            bool = true;
        }
    }

function updateImage(icon, state) {
    icon.image = ScriptUI.newImage(state);
}