« »

A little bit of magic for your visitors: move your cursor to the center of your webpage and the picture will fade-out. Move the cursor toward the corners of the webpage and the picture will fade-in.

Label: MagicPicture: image fade-in fade-out onmousemove

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<SCRIPT language=JavaScript>
<!-- Beginning of JavaScript -
// MagicPicture: image fade-in fade-out onmousemove

// The vertical position of the image (distance to the top-margin of the webpage, pixels)
// You don't need to set the horizontal position as the pictute will be centered!
var imgpostop=100

// Don't edit the variables below.
var i_fadestrength=0
var marginbottom
var marginright
var center_x
var center_y
var distance_x
var distance_y
var distance_xy
var imgwidth
var imgheight
var imgposleft
var x,y

function initiate() {
	if (document.all) {
		marginbottom=document.body.clientHeight
    	marginright=document.body.clientWidth
		imgwidth=imgcontainer.offsetWidth
		imgheight=imgcontainer.offsetHeight
		imgposleft=Math.round((marginright-imgwidth)/2)
		center_x=Math.round(marginright/2)
		center_y=Math.round(marginbottom/2)
		document.all.imgcontainer.style.posLeft=imgposleft
		document.all.imgcontainer.style.posTop=imgpostop
		document.all.imgcontainer.style.visibility="visible"
		changeopacity()
	}
}


function changeopacity() {	
	imgcontainer.filters.alpha.opacity=Math.round(i_fadestrength)
	var timer=setTimeout("changeopacity()",50)	
}

function handlerMM(e){
	x=document.body.scrollLeft+event.clientX
	y=document.body.scrollTop+event.clientY
	distance_x=Math.abs(x-center_x)	
	distance_y=Math.abs(y-center_y)	
	distance_xy=distance_x+distance_y
	i_fadestrength=100/(marginright+marginbottom)*2*distance_xy	
}

if (document.all){
	document.onmousemove = handlerMM;
}

// - 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

<DIV id=imgcontainer style="FILTER: alpha(opacity=0); POSITION: absolute; VISIBILITY: hidden; Z-INDEX: 100">
  <IMG src="logojs.gif" width="148" height="181"> </DIV>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->