In this tutorial, we will be using JavaScript to create a bulb on/off effect in a webpage. The following source code uses two identical bulb images one in on state while the other in off state.
You can use the following images for the bulb :
Full Source Code :
<!DOCTYPE html>
<html>
<head>
<style>
body{
background:#000;
}
.bulb-wrapper{
display: flex;
align-items: center;
justify-content: center;
}
.switch{
right: 10px;
cursor: pointer;
position: absolute;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
.onoff-on {
background-color: #00a65a!important;
border-color: #008d4c;
color: #fff;
padding: 5px 5px;
text-align: left;
border-radius: 5px;
border-right: 70px solid #ddd;
width: 70px;
-webkit-box-shadow: inset 0 3px 5px rgb(99 0 0 / 13%);
-moz-box-shadow: inset 0 3px 5px rgba(99,0,0,.125);
box-shadow: inset 0 3px 5px rgb(99 0 0 / 13%);
text-align: center;
cursor: pointer;
}
.onoff-off {
background-color: #f56954!important;
border-color: #f4543c;
color: #fff;
padding: 5px 5px;
text-align: right;
border-radius: 5px;
border-left: 70px solid #ddd;
width: 70px;
text-align: center;
-webkit-box-shadow: inset 0 3px 5px rgb(99 0 0 / 13%);
-moz-box-shadow: inset 0 3px 5px rgba(99,0,0,.125);
box-shadow: inset 0 3px 5px rgb(99 0 0 / 13%);
}
#on,#off{
width: 38%;
}
</style>
</head>
<body>
<div id="switch" class="switch onoff onoff-off">Off</div>
<div class="bulb-wrapper">
<img id="off" src="off.png">
<img id="on" style="display:none;" src="on.png">
</div>
<script>
var bulb_on = document.getElementById('on');
var bulb_off = document.getElementById('off');
var switch_btn = document.getElementById('switch');
function toggleOnOff(){
if (window.getComputedStyle(bulb_on).display === "none") {
bulb_on.style.display = 'block';
bulb_off.style.display = 'none';
switch_btn.innerHTML = 'On';
}else{
bulb_on.style.display = 'none';
bulb_off.style.display = 'block';
switch_btn.innerHTML = 'Off';
}
toggleSwitch();
}
function toggleSwitch(){
switch_btn.classList.toggle("onoff-on");
switch_btn.classList.toggle("onoff-off");
}
switch_btn.addEventListener('click',function(){
toggleOnOff();
});
</script>
</body>
</html>
Follow this video for complete guidance :
