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>