« »

Even more magic for your visitors! Moving your cursor all over the webpage will change the opacity of two overlapping images at the same time. The result: a smooth interactive animation! Unique way to impress your webguests. Explorer 4.x

Label: MagicPicture

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 2.0: image fade-in fade-out onmousemove with 2 images

// the URL of your first image
var image_url_1="photo3.jpg"

// the URL of your second image
var image_url_2="photo6.jpg"

// The vertical position of the first image (distance to the top border of the webpage, pixels)
var imgpostop1=10

// The horizontal position of the first image (distance to the left border of the webpage, pixels)
var imgposleft1=10

// The vertical position of the second image (distance to the top border of the webpage, pixels)
var imgpostop2=10

// The horizontal position of the second image (distance to the left border of the webpage, pixels)
var imgposleft2=10

// Don't edit the variables below.
img1=new Image()
img1.src=image_url_1
img2=new Image()
img2.src=image_url_2
var i_fadestrength=0
var marginright
var center_x
var distance_x
var imgwidth1
var imgheight1
var imgwidth2
var imgheight2
var i_visible=1

var x,y

function initiate() {
	if (document.all) {
		document.onmousemove = handlerMM;
    	marginright=document.body.clientWidth
		imgwidth1=imgcontainer1.offsetWidth
		imgheight1=imgcontainer1.offsetHeight
		imgwidth2=imgcontainer2.offsetWidth
		imgheight2=imgcontainer2.offsetHeight
		center_x=Math.round(marginright/2)
		imgcontainer1.innerHTML="<img src="+image_url_1+">"
		imgcontainer2.innerHTML="<img src="+image_url_2+">"
		document.all.imgcontainer1.style.posLeft=imgposleft1
		document.all.imgcontainer1.style.posTop=imgpostop1
		document.all.imgcontainer1.style.visibility="visible"
		document.all.imgcontainer2.style.posLeft=imgposleft2
		document.all.imgcontainer2.style.posTop=imgpostop2
		document.all.imgcontainer2.style.visibility="visible"
		changeopacity()
	}
	
}

function changeopacity() {	
	imgcontainer1.filters.alpha.opacity=Math.round(i_fadestrength)
	imgcontainer2.filters.alpha.opacity=100-Math.round(i_fadestrength)
	var timer=setTimeout("changeopacity()",80)	
}

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

// - 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=initiate()>
<DIV id=imgcontainer1 style="FILTER: alpha(opacity=50); POSITION: absolute; VISIBILITY: hidden"></DIV>
<DIV id=imgcontainer2 style="FILTER: alpha(opacity=50); POSITION: absolute; VISIBILITY: hidden"></DIV>
</BODY>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->