»
AnglaisFran�aisVietnamien

Imprimer - MagicPicture - JavaScriptBank.com

Version compl�te: jsB@nk » Image » MagicPicture
URL: https://www.javascriptbank.com/magicpicture.html

MagicPicture © JavaScriptBank.comEncore plus de magie à vos visiteurs! Déplacement de votre curseur tous sur le site va changer l'opacité de chevauchement des deux images en même temps. Le résultat: une bonne animation interactive! Unique façon d'impressionner vos webguests. Explorer 4.x

Version compl�te: jsB@nk » Image » MagicPicture
URL: https://www.javascriptbank.com/magicpicture.html



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


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