Dynamic Spotlights version 1.1


IMPORTANT NOTE: You are allowed to use this script provided that all comments and copyright notice are left intact. This script can be used for personal, non-commercial purpose.


Getting Started

Anime Theme

Dynamic HTML

If you are using IE4.0+, place your mouse pointer over the above tables and you should see the spotlight effects! These effects can be applied to tables, images, and any other block HTML elements!

First of all, download the following file.

Download "spotlight.zip"!

Make your donations to Anime Theme! Support us!  Support Anime Theme to provide MORE scripts! Thanks!

After that, insert the following codes before the BODY tag.

<script language="JScript">
<!--
// options area
//-->
</script>
<script language="JScript" src="light.js"></script>
<STYLE>
<!--
#spotlight { filter:Light(enabled=0) }
//-->
</STYLE>

For each HTML element you want to apply the effects to, assign "spotlight" as its ID.

Example: <IMG id=spotlight src="cool.jpg" width=200 height=100>

Finally, insert the following codes at the end of the page.

<script language="JScript">
<!--
// Dynamic Spotlights version 1.1
// Copyright (c) 1999-2002 Butz Yung. All rights reserved.
// No part of the script may be distributed or modified without permission.
// Homepage: http://www.animetheme.com
// The above copyright notice MUST BE LEF INTACT.
initLight()
//-->
</script>

NOTE: The above comments and copyright notice MUST BE LEFT INTACT.


Miscellaneous Options

This script can always be used with the default settings, but you may change the following JavaScript variables for customized effects. Add the changes in "options area" (the first SCRIPT area).

speed_factor

This variable determines the speed of the moving lights. The bigger the number the faster the movement will be. Default value is 1.

Example: var speed_factor = 2

z_factor

This variable determines the height of the light source, which affects the size of the light clones. The bigger the number the bigger the light clones will be. Default value is 1.

Example: var z_factor = 0.5

base_light

This variable determines the amount of background light. Value ranges from 0 to 100. The bigger the number the brighter the background will be. Default value is 25.

Example: var base_light = 10

light_interval

This variable determines the length of time (measured in ms) between successive updates of the spotlights' positions. Default value is 200.

Example: var light_interval = 100


Take a look at "demo.html" included in the zip for an example of HTML document using this script. Remember to upload "light.js" to your web server for the script to work. You are always recommended to test your page before sending it online. If you still have problems, email me. Please include the file you are working on in your email.

Still have questions? Check out DHTML Forum!


Return to Dynamic HTML Resource Center