Библиотека Javascript. SE@RCHER

<html> <head> <TITLE>Фото автозаменяется через прозрачные окружности</TITLE> <meta NAME="keywords" CONTENT="images, DHTML, slideshow, rollover, JavaScript, download, animation, free, applet, dynamic"> <meta NAME="description" CONTENT="This DHTML-crossbrowser transition effect can be added to any slideshows. Very flexible as it works with different image sizes. Each image has a link of its own. Easy configuration."> </HEAD> <BODY bgcolor=FFFFFF> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <SCRIPT > var imgpreload=new Array() for (i=0;i<=imgsname.length-1;i++) { imgpreload[i]=new Image() imgpreload[i].src=imgsname[i] } var coverimage = new Array() coverimage[0]="circle01.gif" coverimage[1]="circle02.gif" coverimage[2]="circle03.gif" coverimage[3]="circle04.gif" coverimage[4]="circle05.gif" coverimage[5]="circle1.gif" coverimage[6]="circle2.gif" coverimage[7]="circle3.gif" coverimage[8]="circle4.gif" coverimage[9]="circle5.gif" coverimage[10]="circle6.gif" coverimage[11]="circle7.gif" coverimage[12]="circle8.gif" coverimage[13]="circle11.gif" var covimgpreload=new Array() for (i=0;i<=coverimage.length-1;i++) { covimgpreload[i]=new Image() covimgpreload[i].src=coverimage[i] } var i_imgs=0 var i_loop=0 var thisurl=0 var timer var coverwidth var coverheight standstill=standstill*1000 function init() { if (document.all) { document.all.imgs.style.posTop=imgstop document.all.imgs.style.posLeft=imgsleft document.all.cover.style.posTop=imgstop document.all.cover.style.posLeft=imgsleft imgs.innerHTML="<img name='imgsback' src='"+imgsname[i_loop]+"' border=0>" coverwidth=imgs.offsetWidth coverheight=imgs.offsetHeight cover.innerHTML="<a href='javascript:gotourl()'><img width="+coverwidth+" height="+coverheight+" name='imgcover' src='"+coverimage[i_loop]+"' border=0></a>" enlargehearts() } if (document.layers) { document.imgs.top=imgstop document.imgs.left=imgsleft document.cover.top=imgstop document.cover.left=imgsleft document.imgs.document.write("<img name='imgsback' src='"+imgsname[i_loop]+"' border=0>") document.imgs.document.close() coverwidth=document.imgs.document.width coverheight=document.imgs.document.height document.cover.document.write("<a href='javascript:gotourl()'><img width="+coverwidth+" height="+coverheight+" name='imgcover' src='"+coverimage[i_loop]+"' border=0></a>") document.cover.document.close() enlargehearts() } } function enlargehearts() { if (i_loop<=coverimage.length-1) { if (document.all) { imgcover.src=coverimage[i_loop] } if (document.layers) { document.cover.document.imgcover.src=coverimage[i_loop] } i_loop++ timer= setTimeout("enlargehearts()",pause) } else { clearTimeout(timer) i_loop-- timer= setTimeout("shrinkhearts()",standstill) } } function shrinkhearts() { if (i_loop>=0) { if (document.all) { imgcover.src=coverimage[i_loop] } if (document.layers) { document.cover.document.imgcover.src=coverimage[i_loop] } i_loop-- timer= setTimeout("shrinkhearts()",pause) } else { clearTimeout(timer) i_loop=0 i_imgs++ if (i_imgs>=imgsname.length) {i_imgs=0} if (document.all) { imgsback.src=imgsname[i_imgs] } if (document.layers) { document.imgs.document.imgsback.src=imgsname[i_imgs] } timer= setTimeout("enlargehearts()",(4*pause)) } } function gotourl() { document.location.href=imgslink[i_imgs] } window.onload=init </SCRIPT> <DIV ID="imgs" style="position:absolute"> </DIV> <DIV ID="cover" style="position:absolute"> </DIV> <DIV ID="redirect" style="position:absolute;top:10px;left:330px;"> <table border=1 cellpadding=5 cellspacing=0><tr><td bgcolor=yellow> <a href="http://www.24fun.com/fast/index.html" target="_blank"><font size=2 color=black face=Verdana><b>Download 100's of free copy-and-paste scripts</b></font></a> </td></tr></table> </DIV> <DIV ID="instructions" style="position:absolute;top:250px;left:10px;"> <font size=2 color=black face=Verdana><b>Slideshow with circle transition effect</b><br><br> This crossbrwoser slideshow uses an eyecatching transition effect between the images. Each image has a link of its own. Add as many images as you like. Easy copy and paste configuration. CROSSBROWSER. <br><br><br> <form> <b>Configuration:</b><br><br> <b>Step 1:</b> <a href="imgtranscircle.zip">Download this ZIP-File</a>, unzip the images and the script-file 'imgtranscircle.js' and put them all into the same folder as your webpage.<br><br> <b>Step 2:</b> Open your webpage and paste the following code between the <b><body></b> and <b></body></b> tags:<br> <input type=button onClick="this.form.code1.focus();this.form.code1.select()" value="select all" style="font-size:8pt"><br> <textarea name="code1" cols="60" rows="6" style="font-size:8pt"> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <SCRIPT > var imgpreload=new Array() for (i=0;i<=imgsname.length-1;i++) { imgpreload[i]=new Image() imgpreload[i].src=imgsname[i] } var coverimage = new Array() coverimage[0]="circle01.gif" coverimage[1]="circle02.gif" coverimage[2]="circle03.gif" coverimage[3]="circle04.gif" coverimage[4]="circle05.gif" coverimage[5]="circle1.gif" coverimage[6]="circle2.gif" coverimage[7]="circle3.gif" coverimage[8]="circle4.gif" coverimage[9]="circle5.gif" coverimage[10]="circle6.gif" coverimage[11]="circle7.gif" coverimage[12]="circle8.gif" coverimage[13]="circle11.gif" var covimgpreload=new Array() for (i=0;i<=coverimage.length-1;i++) { covimgpreload[i]=new Image() covimgpreload[i].src=coverimage[i] } var i_imgs=0 var i_loop=0 var thisurl=0 var timer var coverwidth var coverheight standstill=standstill*1000 function init() { if (document.all) { document.all.imgs.style.posTop=imgstop document.all.imgs.style.posLeft=imgsleft document.all.cover.style.posTop=imgstop document.all.cover.style.posLeft=imgsleft imgs.innerHTML="<img name='imgsback' src='"+imgsname[i_loop]+"' border=0>" coverwidth=imgs.offsetWidth coverheight=imgs.offsetHeight cover.innerHTML="<a href='javascript:gotourl()'><img width="+coverwidth+" height="+coverheight+" name='imgcover' src='"+coverimage[i_loop]+"' border=0></a>" enlargehearts() } if (document.layers) { document.imgs.top=imgstop document.imgs.left=imgsleft document.cover.top=imgstop document.cover.left=imgsleft document.imgs.document.write("<img name='imgsback' src='"+imgsname[i_loop]+"' border=0>") document.imgs.document.close() coverwidth=document.imgs.document.width coverheight=document.imgs.document.height document.cover.document.write("<a href='javascript:gotourl()'><img width="+coverwidth+" height="+coverheight+" name='imgcover' src='"+coverimage[i_loop]+"' border=0></a>") document.cover.document.close() enlargehearts() } } function enlargehearts() { if (i_loop<=coverimage.length-1) { if (document.all) { imgcover.src=coverimage[i_loop] } if (document.layers) { document.cover.document.imgcover.src=coverimage[i_loop] } i_loop++ timer= setTimeout("enlargehearts()",pause) } else { clearTimeout(timer) i_loop-- timer= setTimeout("shrinkhearts()",standstill) } } function shrinkhearts() { if (i_loop>=0) { if (document.all) { imgcover.src=coverimage[i_loop] } if (document.layers) { document.cover.document.imgcover.src=coverimage[i_loop] } i_loop-- timer= setTimeout("shrinkhearts()",pause) } else { clearTimeout(timer) i_loop=0 i_imgs++ if (i_imgs>=imgsname.length) {i_imgs=0} if (document.all) { imgsback.src=imgsname[i_imgs] } if (document.layers) { document.imgs.document.imgsback.src=imgsname[i_imgs] } timer= setTimeout("enlargehearts()",(4*pause)) } } function gotourl() { document.location.href=imgslink[i_imgs] } window.onload=init </SCRIPT> <DIV ID="imgs" style="position:absolute"> </DIV> <DIV ID="cover" style="position:absolute"> </DIV>
IMPORTANT: Do not paste this code into tables or <DIV> and </DIV> tags or between any other container-tags!

Step 3: Open your webpage, and configure the images, the position and the speed of your slideshow inside the script-section.