« »

DHTML in IE 4 includes a multimedia feature that allows a light to be cast on any image and moved around. We utilized this technology to create a moving light on image script. The light continuously moves from the left-top corner of any image to the rgiht-bottom corner, than back again. You can apply this light to ANY number of images on your page easily, with varying speed for each light.

Label: SpotLight On Image

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<SCRIPT>
<!-- Beginning of JavaScript -

var imageheight=280 
var imagewidth=560

var cliptop
var clipbottom
var clipleft
var clipright
var clippoints
			
// toc do thuc hien hieu ung						  
var tempo=100

// vi tri bat dau hieu ung
var stepx=0
var stepy=0
var timer

function setValues() {
	if (document.all) {
		document.all.image.style.posLeft=0
   		document.all.image.style.posTop=0
		document.all.imagecontent.style.posLeft=0
   		document.all.imagecontent.style.posTop=0
    	moveimage()
	}
}

function moveimage() {
	if (stepx<=imagewidth || stepy<=imageheight) {	
		stepx=stepx+12
		stepy=stepy+6
		image.innerHTML="<span style='width:"+stepx+"px; height:"+stepy+"px;background-color:000000;filter:alpha(opacity=0,finishopacity=100,style=2'></span>"
		cliptop=0
		clipbottom=stepy
		clipleft=0
		clipright=stepx
		
		clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
		document.all.imagecontent.style.clip=clippoints
    	timer=setTimeout("moveimage()",tempo)
	}
	else{
		clearTimeout(timer)
		timer=setTimeout("moveimage2()",tempo)
	}
}

function moveimage2() {
	if (stepx>=0 || stepy>=0) {	
		stepx=stepx-12
		stepy=stepy-6
		image.innerHTML="<span style='width:"+stepx+"px; height:"+stepy+"px;background-color:000000;filter:alpha(opacity=0,finishopacity=100,style=2'></span>"
		cliptop=0
		clipbottom=stepy
		clipleft=0
		clipright=stepx
		
		clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
		document.all.imagecontent.style.clip=clippoints
    	timer=setTimeout("moveimage2()",tempo)
	}
	else{
		stepx=0
		stepy=0
		clearTimeout(timer)
		timer=setTimeout("moveimage()",tempo)
	}
}

// - End of JavaScript - -->
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<BODY onload=setValues()>
<DIV id=imagecontent 
style="LEFT: -5000px; POSITION: absolute; TOP: -5000px">
  <IMG 
src="logojs.gif" width="600" height="314"></DIV>
<DIV id=image style="POSITION: absolute; TOP: -50px"></DIV>

</BODY>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->