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( == "block"){ = "none"; lightSwitch.src = "images/light_switch_up.jpg"; lightSwitch.title = "Enter Theatre Mode"; } else { = "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="" frameborder="0" allowfullscreen></iframe> </div> <h2>My web page has a lot off stuff on it</h2> </body> </html>

CSS Videos

Background and Overlay Effects

Multiple Background Images TutorialTheater Mode Overlay Tutorial Javascript Light Switch Toggle DarkFixed Header and Footer Div Layout TutorialLinear Gradient Background TutorialRadial Gradient Background TutorialVideo Background Tutorial Plus Youtube Embed
Top of Page
Home Page
Table of Contents
Donate / Support
Web Hosting
Terms of Use
© 2015 All Rights Reserved