Toggle Buttons

[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

CSS code:

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%;
                        }

HTLM Code:

 

<!DOCTYPE html>
<html>
<head>
<title>Scalextric Modules</title>
<script type="text/javascript" src="..\..\..\dist\b4w.js"></script>

<meta name="description" content="Select your modules and rearrange to your requirements." />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="scalextric_interior.css" rel="stylesheet" type="text/css"/>
<link href="media.css" rel="stylesheet" type="text/css"/>

<script type="module" src="scalextric_interior.js"></script>

</head>

<body>

<div id="controls-container">
    <div class="top-line"></div>

    <div class="bottom-line">
        <div class="button-container">
            <div class="delete-container button data-button">
                <div id="delete"></div>
            </div>
            <div input type="checkbox" id="load-1" class="button data-button">
            <span class="final__toggle-1__button"></span></div>
            <div input type="checkbox" id="load-2" class="button data-button"></div>
            <div input type="checkbox" id="load-3" class="button data-button"></div>
            <div id="load-4" class="button data-button"></div>
            <div id="load-5" class="button data-button"></div>
            <div id="load-6" class="button data-button"></div>
            <div id="load-7" class="button data-button"></div>
            <div id="load-8" class="button data-button"></div>
            <div id="load-9" class="button data-button"></div>
            <div id="load-10" class="button data-button"></div>

            <div class="rot-button-container">
                <div class="button rotation-button rotation-button-left">
                    <div id="rot-ccw"></div>
                </div>
                <div class="button rotation-button rotation-button-right">
                    <div id="rot-cw"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="main_canvas_container"></div>
</body>
</html>

 

Edited June 13, 2019 by connalmcilwraith