»
EnglishFrenchVietnamese

Print - MagicPicture: image fade-in fade-out onmousemove - JavaScriptBank.com

Full version: jsB@nk » Image » MagicPicture: image fade-in fade-out onmousemove
URL: http://www.javascriptbank.com/magicpicture-image-fade-in-fade-out-onmousemove.html

MagicPicture: image fade-in fade-out onmousemove © JavaScriptBank.comA 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.

Full version: jsB@nk » Image » MagicPicture: image fade-in fade-out onmousemove
URL: http://www.javascriptbank.com/magicpicture-image-fade-in-fade-out-onmousemove.html



JavaScript
<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=0var marginbottomvar marginrightvar center_xvar center_yvar distance_xvar distance_yvar distance_xyvar imgwidthvar imgheightvar imgposleftvar x,yfunction initiate() {if (document.all) {marginbottom=document.body.clientHeight    marginright=document.body.clientWidthimgwidth=imgcontainer.offsetWidthimgheight=imgcontainer.offsetHeightimgposleft=Math.round((marginright-imgwidth)/2)center_x=Math.round(marginright/2)center_y=Math.round(marginbottom/2)document.all.imgcontainer.style.posLeft=imgposleftdocument.all.imgcontainer.style.posTop=imgpostopdocument.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.clientXy=document.body.scrollTop+event.clientYdistance_x=Math.abs(x-center_x)distance_y=Math.abs(y-center_y)distance_xy=distance_x+distance_yi_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-->


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