After my last modification to this script for duration of a single image I made changes so that multiple images could use be set to have the effect expire. With this new request, I have combined that with the ability to set the direction to up and down or left to right:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<!-- saved from url=(0014)about:internet -->
<!-- this and above comment should be removed for live, non-demo use -->
<head>
<title>Modified Moving Light w/direction & duration options - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
<!--
#spotlight{
filter:light
}
-->
</style>
</head>
<body>
<!-- Example Image syntax -->
<img id="spotlight" movement="0" speed="150" src="photo6.jpg" width="140" height="225" border="0" alt="" title="" /><br>
<img id="spotlight" speed="100" src="photo8.jpg" width="140" height="225" border="0" alt="" title="" />
<img id="spotlight" movement="1" speed="50" src="photo9.jpg" width="140" height="225" border="0" alt="" title="" /><br>
<script type="text/javascript">
/*
Moving light on image script (IE5.5+ only)
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of Use, visit dynamicdrive.com
Modified here by jscheuer1 in http://www.dynamicdrive.com/forums
for duration and movement control
*/
var duration=0 //set duration of effect in milliseconds, use 0 for continuous
var movement=1 //set default movement direction, use 1 for up and down, 0 for left to right
////////////////// No Need to Edit Below ////////////////
if (document.all&&window.spotlight&&document.documentElement.filters){
var flag=0
var x=new Array()
var direction=new Array()
var y=new Array()
if (spotlight.length==null){
spotlight[0]=document.all.spotlight
x[0]=0
direction[0]="right"
y[0]=spotlight[0].width
spotlight[0].filters.light.addPoint(100,50,100,255,255,255,90)
}
else
for (i=0;i<spotlight.length;i++){
x[i]=0
direction[i]="right"
y[i]=spotlight[i].width
spotlight[i].filters.light.addPoint(100,50,100,255,255,255,90)
}
}
function slidelight(cur){
if(flag)
return;
if(spotlight[cur].movement&&spotlight[cur].movement=='1')
spotlight[cur].filters.light.moveLight(0,y[cur],x[cur],200,-1)
else if(spotlight[cur].movement&&spotlight[cur].movement=='0')
spotlight[cur].filters.light.moveLight(0,x[cur],y[cur],200,-1)
else if (movement)
spotlight[cur].filters.light.moveLight(0,y[cur],x[cur],200,-1)
else
spotlight[cur].filters.light.moveLight(0,x[cur],y[cur],200,-1)
if (x[cur]<spotlight[cur].height+200&&direction[cur]=="right")
x[cur]+=10
else if (x[cur]>spotlight[cur].height+200){
direction[cur]="left"
x[cur]-=10
}
else if (x[cur]>-200&&x[cur]<-185){
direction[cur]="right"
x[cur]+=10
}
else{
x[cur]-=10
direction[cur]="left"
}
}
if (document.all&&window.spotlight&&document.documentElement.filters){
if (spotlight.length==null){
spot=setInterval("slidelight(0)",spotlight[0].speed)
if (duration)
setTimeout("clearInterval(spot);document.all['spotlight'].id='';return;", duration);
}
else{
for (t=0;t<spotlight.length;t++){
eval('temp'+t+'=setInterval("slidelight('+t+')",'+spotlight[t].speed+')')
eval(eval('temp'+t))
}
if (duration)
setTimeout("clearIds()", duration);
}
}
function clearIds(){
var t=0
flag=1
var imgs=document.images
for (var i_tem = 0; i_tem < imgs.length; i_tem++)
if(imgs[i_tem].id=="spotlight"){
imgs[i_tem].id=''
clearInterval(eval('temp'+t))
t++
}
}
</script>
</body>
</html>
Bookmarks