Java Script Tutorials [Slideshow with dissolving effect]
Example: Pretty cool huh?..you can edit where the images (left/center/etc.) by editing the code below (better with images the same size)
Insert this in the <body> of your page
<script language="JavaScript"> <!-- Beginning of JavaScript - // // // // // // // // // // // // // // // // // // // // // // // // C O N F I G U R A T I O N S T A R T S H E R E // // // // // // // // // // // // // // // // // // // // // // // // the URLs of your images. Add as many images as you like var imgsname = new Array() imgsname[0]="15.jpg" imgsname[1]="24.jpg" imgsname[2]="7.jpg" // the the links of your images var imgsurl = new Array() imgsurl[0]="http://entensity.nu" imgsurl[1]="http://entensity.nu" imgsurl[2]="http://entensity.nu" // the target of your links. Accepted values: '_blank', '_self', '_top' // '_parent' or the name of your window var linktarget="_blank" // standstill of each image(seconds) var pause=3 // horizontal position of the slideshow (distance to the left margin of the browser-window, pixels) var posleft=200 // vertical position of the slideshow (distance to the top margin of the browser-window, pixels) var postop=100 // // // // // // // // // // // // // // // // // // // // // // // // C O N F I G U R A T I O N E N D S H E R E // // // // // // // // // // // // // // // // // // // // // // // // do not edit the code below var contentimage="" var i_image=0 var i_stepwave=0 var i_maxstepwave=40 var imgpreload=new Array() for (i=0;i<=imgsname.length-1;i++) { imgpreload[i]=new Image() imgpreload[i].src=imgsname[i] } pause=pause*1000 function initiate() { contentimage="<a href='"+imgsurl[i_image]+"' target='"+linktarget+"'><img src='"+imgsname[i_image]+"' border='0'></a>" if (document.all) { waveimage.innerHTML=contentimage waveimage.style.posLeft=posleft waveimage.style.posTop=postop enlargewave() } if (document.layers) { document.waveimage.left=posleft document.waveimage.top=postop changeimage() } } function enlargewave() { if (i_stepwave<=i_maxstepwave) { waveimage.filters.wave.phase=i_stepwave waveimage.filters.wave.strength=i_stepwave waveimage.filters.wave.lightstrength=i_stepwave waveimage.filters.wave.freq=i_stepwave i_stepwave++ var timer=setTimeout("enlargewave()",50) } else { clearTimeout(timer) changeimage() } } function reducewave() { if (i_stepwave>0) { waveimage.filters.wave.phase=i_stepwave waveimage.filters.wave.strength=i_stepwave waveimage.filters.wave.lightstrength=i_stepwave waveimage.filters.wave.freq=i_stepwave i_stepwave-- var timer=setTimeout("reducewave()",50) } else { clearTimeout(timer) var timer=setTimeout("enlargewave()",pause) } } function changeimage() { i_image++ if (i_image>=imgsname.length) {i_image=0} contentimage="<a href='"+imgsurl[i_image]+"' target='"+linktarget+"'><img src='"+imgsname[i_image]+"' border='0'></a>" if (document.all) { waveimage.innerHTML=contentimage reducewave() } if (document.layers) { document.waveimage.document.write(contentimage) document.waveimage.document.close() var timer=setTimeout("changeimage()",pause) } } if (document.all) { document.write('<DIV ID="waveimage" style="position:absolute; filter:wave();"> </DIV>') } if (document.layers) { document.write('<LAYER NAME="waveimage"></LAYER>') document.close() } window.onload=initiate // - End of JavaScript - --> </script>