File: switch.html

Recommend this page to a friend!
  Classes of Arturs Sosins   Light source   switch.html   Download  
File: switch.html
Role: Example script
Content type: text/plain
Description: Toggling light switch
Class: Light source
Apply a shadow to elements based on light position
Author: By
Last change:
Date: 12 years ago
Size: 2,011 bytes


Class file image Download
<!DOCTYPE html> <!-- /************************************************************* * This script is developed by Arturs Sosins aka ar2rsawseen, * Feel free to distribute and modify code, but keep reference to its creator * * Light source class provides a way to define light source position * and emulate text and box shadows according to provided position of light source. * * For more information, examples and online documentation visit: * **************************************************************/ --> <html> <head> <style type='text/css'> #simple { width: 300px; position: absolute; top: 100px; left: 100px; } .sub { margin: 0px 0 150px 0; border: 1px solid black; } #source { position: absolute; top: 120px; left: 120px; width: 146px; height: 150px; background-image: url("./lightbulb.png"); } </style> </head> <body> <h3>Click on light bulb to toggle it.</h3> <div id='simple'> <div class='sub'>I am a text one</div> <div class='sub'>I am a text two</div> </div> <div id='source' onclick='toggle_light(this)'> </div> <script type="text/javascript" src="./light_source.packed.js" ></script> <script type="text/javascript"> var ls = new light_source("simple",{ //height of light source above objects sourceHeight: 3, //blur level against distance maxBlur: 50, //color of shadow shadowColor: "#aaa", //aplly shadow to text textShadow: true, //apply shadow to box boxShadow: true, //apply effect to all element's children includeChild: true, //x position of light source sourceX: 193, //y position of light source sourceY: 195 });; var off = true; function toggle_light(elem){ if(off) { ls.on(); off = false; = "0px -150px"; } else {; off = true; = "0px 0px"; } } </script> </body> </html>