Toggle button images

[connalmcilwraith]

Hi,

I'm completely new to CSS, so forgive me if I'm talking nonsense with my request...

I have the following code, which generates button images along the bottom of the screen. What I would like to do is to have the buttons 'toggle', so that I have a 'greyed out' version of the image (1.png, 2.png, etc), after the button has been clicked and returned to the original, when clicked again.

Then I would like to remove the 'delete' button, as 'unclicking' the image button will remove the object from the screen. So, I would like to understand what I need to do in HTML/CSS to have that function 'visible' the js file.

Hopefully that makes sense but happy to add detail, if required. 

 

Thanks for your help,

Connal

 

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

div#main_canvas_container {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

*:active {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -moz-tap-highlight-color: rgba(0,0,0,0);
    tap-highlight-color: rgba(0,0,0,0);
}

#controls-container {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1;
    pointer-events: none;
}
    .top-line {
        height: 100px;
        background: url("./interface/8.png") repeat-x;
        background-size: 100% 100%;
    }
    .bottom-line {
        height: 140px;
        background-color: #fff;
    }
        .button-container {
            display: table;
            margin: 0 auto;
            height: 130px;
        }
            .button {
                float: left;
                height: 100%;
                cursor: pointer;
                background-repeat: no-repeat;
                pointer-events: auto;
            }
                .data-button {
                    width: 130px;
                    height: 130px;
                    //background-image: url("./interface/1_1.png");
                    background-size: cover;
                }
                    .data-button:not(.delete-container):before {
                        content: "";
                        position: absolute;
                        width: 130px;
                        height: 90px;
                        margin: -8px 0 0 -8px;
                        background-repeat: no-repeat;
                        background-size: cover;
                    }
                        .data-button#load-1:before {
                            background-image: url("./interface/1.png");
                        }
                        .data-button#load-2:before {
                            background-image: url("./interface/2.png");
                        }
                        .data-button#load-3:before {
                            background-image: url("./interface/3.png");
                        }
                        .data-button#load-4:before {
                            background-image: url("./interface/4.png");
                        }
                        .data-button#load-5:before {
                            background-image: url("./interface/5.png");
                        }
                        .data-button#load-6:before {
                            background-image: url("./interface/16.png");
                        }
                        .data-button#load-7:before {
                            background-image: url("./interface/17.png");
                        }
                        .data-button#load-8:before {
                            background-image: url("./interface/18.png");
                        }
                        .data-button#load-9:before {
                            background-image: url("./interface/19.png");
                        }
                        .data-button#load-10:before {
                            background-image: url("./interface/20.png");
                        }
                        .data-button:active:not(.delete-container) {
                        //background-image: url("./interface/1_2.png");
                    }

                .delete-container {
                    cursor: default;
                    background-image: url("./interface/7_1.png");
                }
                    .delete-container.active {
                        background-image: url("./interface/7_2.png");
                    }
                    #delete {
                        margin: 25% auto 0;
                        cursor: pointer;
                        width: 60%;
                        height: 55%;
                    }

                .rot-button-container {
                    float: left;
                    width: 300px;
                    height: 130px;
                    background: url("./interface/2_1.png") no-repeat;
                    background-size: cover;
                    pointer-events: auto;
                }
                    .rotation-button {
                        width: 50%;
                        background-size: cover;
                    }
                        .rotation-button-left.active {
                            background-image: url("./interface/2_2.png");
                        }
                        .rotation-button-right.active {
                            background-image: url("./interface/2_3.png");
                            background-position: right;
                        }
                        .rotation-button>div {
                            width: 60%;
                            height: 50%;
                            margin: 20% 0 0 35%;
                        }
                        #rot-cw {
                            margin-left: 5%;
                        }