DevelopPHP.com
Web Development Training System

Theater Mode Overlay Tutorial Javascript Light Switch Toggle Dark

Learn to program web page theater mode darkness using a CSS and JavaScript overlay. This one uses a light switch as the user interface to allow a viewer to toggle the page in and out of theatre mode. Our elements and their CSS are structured a little bit differently to focus on an existing special content box on the page as opposed to bringing a new DIV into the center of the page. <!DOCTYPE html> <html> <head> <style> div#overlay { display:none; z-index: 2; background:url(style/opaqueDark.png); position:fixed; width:100%; height:100%; top:0px; left:0px; text-align:center; } img#lightSwitch { position:relative; z-index: 3; background:url(images/light_switch_down.jpg) no-repeat; cursor:pointer; } div#special { position:relative; z-index: 4; } </style> <script> function toggleTheatreMode(){ var overlay = document.getElementById('overlay'); var lightSwitch = document.getElementById('lightSwitch'); if(overlay.style.display == "block"){ overlay.style.display = "none"; lightSwitch.src = "images/light_switch_up.jpg"; lightSwitch.title = "Enter Theatre Mode"; } else { overlay.style.display = "block"; lightSwitch.src = "images/light_switch_down.jpg"; lightSwitch.title = "Exit Theatre Mode"; } } </script> </head> <body> <!-- Start Overlay --> <div id="overlay"></div> <!-- End Overlay --> <h1>Web page theatre mode example</h1> <img id="lightSwitch" onmousedown="toggleTheatreMode()" src="images/light_switch_up.jpg" width="19" height="46" alt="switch" title="Enter Theatre Mode"> <h3 style="display:inline;">I can put a title here if I want</h3> <div id="special"> <iframe width="560" height="315" src="http://www.youtube.com/embed/69-R9GHcGWU" frameborder="0" allowfullscreen></iframe> </div> <h2>My web page has a lot off stuff on it</h2> </body> </html>
TheaterModeOverlayJavascriptLightSwitchToggleDark
Table of Contents Terms Of Use Subscribe Top ↑