Full version: jsB@nk » Image » MagicPicture
URL: https://www.javascriptbank.com/magicpicture.html
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
Full version: jsB@nk » Image » MagicPicture
URL: https://www.javascriptbank.com/magicpicture.html
<SCRIPT language=JavaScript><!-- Beginning of JavaScript -// MagicPicture 2.0: image fade-in fade-out onmousemove with 2 images// the URL of your first imagevar image_url_1="photo3.jpg"// the URL of your second imagevar 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_1img2=new Image()img2.src=image_url_2var i_fadestrength=0var marginrightvar center_xvar distance_xvar imgwidth1var imgheight1var imgwidth2var imgheight2var i_visible=1var x,yfunction initiate() {if (document.all) {document.onmousemove = handlerMM; marginright=document.body.clientWidthimgwidth1=imgcontainer1.offsetWidthimgheight1=imgcontainer1.offsetHeightimgwidth2=imgcontainer2.offsetWidthimgheight2=imgcontainer2.offsetHeightcenter_x=Math.round(marginright/2)imgcontainer1.innerHTML="<img src="+image_url_1+">"imgcontainer2.innerHTML="<img src="+image_url_2+">"document.all.imgcontainer1.style.posLeft=imgposleft1document.all.imgcontainer1.style.posTop=imgpostop1document.all.imgcontainer1.style.visibility="visible"document.all.imgcontainer2.style.posLeft=imgposleft2document.all.imgcontainer2.style.posTop=imgpostop2document.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.clientXy=document.body.scrollTop+event.clientYdistance_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--><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-->