FULL STACK   ·   UI   ·   UX   ·   GRAPHICS   ·   DEVELOPER   ·   INSTRUCTOR

Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Lights Out For Earth Day Tutorial Dark Page Switch

Published :
Author :
Adam Khoury
Learn to create a lights out for earth day script that uses light switch graphics and contrasting style sheets to allow the user to enter dark energy saving or dark theater mode. You can choose to use dark overlays that disable all page content, or you can use this approach which darkens the page exactly the way you want and all page elements remain fully active. <!DOCTYPE html> <html> <head> <link id="pagestyle" rel="stylesheet" type="text/css" href="default.css"> <style> img#lightSwitch { background:url(images/light_switch_down.jpg) no-repeat; cursor:pointer; } </style> <script> var mode = "default"; function swapStyleSheet(){ var pagestyle = document.getElementById('pagestyle'); var lightSwitch = document.getElementById('lightSwitch'); if(mode == "default"){ pagestyle.setAttribute('href', 'dark.css'); lightSwitch.src = "images/light_switch_down.jpg"; lightSwitch.title = "Turn the lights back on"; mode = "dark"; } else { pagestyle.setAttribute('href', 'default.css'); lightSwitch.src = "images/light_switch_up.jpg"; lightSwitch.title = "Turn the lights off"; mode = "default"; } } </script> </head> <body> <h1>CSS Javascript Lights Out Example</h1> <img id="lightSwitch" onmousedown="swapStyleSheet()" src="images/light_switch_up.jpg" width="19" height="46" alt="switch" title="Turn the lights off"> <h3 style="display:inline;">Pink Floyd - Shine On You Crazy Diamond</h3> <div id="special"> <iframe width="560" height="315" src="http://www.youtube.com/embed/BLKiMbC6s2k?autoplay=1" frameborder="0" allowfullscreen></iframe> </div> <h2>My web page has a lot off stuff on it</h2> </body> </html>