BANNER 3

Album fotografico rotante configurabile

Passo 1:
Selezionare tutto il codice cliccando sul pulsante grigio, quindi posizionatevi sul testo evidenziato, adoperate il tasto destro del mouse per l'operazione di copia ed incolla, non vi rimane che trasferire il tutto nella vostra pagina web, in questo caso nel punto esatto in cui volete creare l'effetto all'interno dei tags: <body> e </body>

<style> .textstyle { position:absolute; visibility:visible; border-style:solid; border-width:2px; border-color:#EEEEEE; font-family:Arial; font-size:8pt; color:#FFFFFF; text-align:center; background-color:red; top:-1000px; } </style>  <script> var rotatingimage=new Array() var rotatingtext=new Array() var rotatinglink=new Array() /////////////////////////////////////////////////////////////////////////////////////// // START OF SCRIPT-CONFIGURATION ZONE ////////////////////////////////////////////////////////////////////////////////////// // Set the path and name (or URL) of your images. Add as many images as you like // Take care that the images have a decent resolution as they are used for the zoom-images as well rotatingimage[0]="carosello/marine0.jpg" rotatingimage[1]="carosello/marine1.jpg" rotatingimage[2]="carosello/marine2.jpg" rotatingimage[3]="carosello/marine3.jpg" rotatingimage[4]="carosello/marine4.jpg" rotatingimage[5]="carosello/marine5.jpg" rotatingimage[6]="carosello/marine6.jpg" rotatingimage[7]="carosello/marine7.jpg" rotatingimage[8]="carosello/marine8.jpg" // Set the the comments corresponding to the images above (requires the same amount as images!) rotatingtext[0]="Sotto i mari 1" rotatingtext[1]="Sotto i mari 2" rotatingtext[2]="Sotto i mari 3" rotatingtext[3]="Sotto i mari 4" rotatingtext[4]="Sotto i mari 5" rotatingtext[5]="Sotto i mari 6" rotatingtext[6]="Sotto i mari 7" rotatingtext[7]="Sotto i mari 8" rotatingtext[8]="Sotto i mari 9" // Set the the comments corresoponding to the images above (requires the same amount as images!) // Set "#" if no link is required rotatinglink[0]="http://www.renatoweb.it" rotatinglink[1]="http://www.renatoweb.it" rotatinglink[2]="http://www.renatoweb.it" rotatinglink[3]="http://www.renatoweb.it" rotatinglink[4]="http://www.renatoweb.it" rotatinglink[5]="http://www.renatoweb.it" rotatinglink[6]="http://www.renatoweb.it" rotatinglink[7]="http://www.renatoweb.it" rotatinglink[8]="http://www.renatoweb.it" // Set the width of the circle (pixels) var circlewidth=420 // Set the height of the circle (pixels) var circleheight=240 // Set the width of your small rotating images (pixels) var imgwidth=150 // Set the height of your small rotating images (pixels) var imgheight=90 // Set the height of your textbox (pixels). This is the textbox (comment) below the rotating images var textboxheight=17 // Set the path and name (or URL) of your backgroundimage // Write "var bgimg=false" if you don't want to add a backgroundimage var bgimg="carosello/fondo.jpg" // Set the number of words that will be displayed at once var displaymax=7 // Set the speed! Tha values may range from 0.1 to 1.0 var step=0.02; // Set the zoomfactor for the big picture that appears on mouseover var zoomfactor=2; // padding to the margin var imgpadding=10 ///////////////////////////////////////////////////////////////////////////////////// // END OF SCRIPT-CONFIGURATION ZONE // Do not edit below this line //////////////////////////////////////////////////////////////////////////////////// var maxopacity=new Array() var i_imgcounter=0 var segment=360/(displaymax); var decrement=0; var op var tmr var opacitystep=Math.round(100/circleinnerheight) var zoomobj var twidth var theight var windowwidth var windowheight var circleinnerwidth=circlewidth-(imgwidth+2*imgpadding) var circleinnerheight=circleheight-(imgheight+2*imgpadding) circleinnerwidth=circleinnerwidth/2 circleinnerheight=circleinnerheight/2 var ns4=document.layers?1:0 var ns6=document.getElementById&&!document.all?1:0 var ie=document.all?1:0 var preloadedimages=new Array() for (i=0;i<rotatingimage.length;i++){ preloadedimages[i]=new Image() preloadedimages[i].src=rotatingimage[i] } for (i=0;i<displaymax;i++) { maxopacity[i]=1 } function getpagesize() { windowwidth=parseInt(document.body.clientWidth) windowheight=parseInt(document.body.clientHeight) twidth=Math.floor(circleinnerwidth) theight=Math.floor(circleinnerheight) i_imgcounter=0 for (i=0; i<displaymax; i++) { var thisspan=eval("document.getElementById('span"+i+"').style") thisspan.left=(twidth*Math.sin(decrement+i*segment*Math.PI/180)+circleinnerwidth+imgpadding)+"px"; thisspan.top=(theight*Math.cos(decrement+i*segment*Math.PI/180)+circleinnerheight+imgpadding)+"px"; thisspan.zIndex=parseInt(thisspan.top) op=parseInt(100/circleinnerheight*(parseInt(thisspan.top)*0.5)) document.getElementById('span'+i).innerHTML="<a href='"+rotatinglink[i_imgcounter]+"'><img border=0 width="+imgwidth+" src='"+rotatingimage[i_imgcounter]+"' id='im"+i_imgcounter+"' onMouseover='stoprotating(this)' onMouseout='restartrotating()'></a><br>"+rotatingtext[i_imgcounter] document.getElementById('span'+i).style.visibility="visible" maxopacity[i]=-1 i_imgcounter++ if (i_imgcounter>=rotatingimage.length) { i_imgcounter=0 } } rotatetext() } function rotatetext() { for (i=0; i<displaymax; i++) { var thisspan=eval("document.getElementById('span"+i+"').style") thisspan.left=(twidth*Math.sin(decrement+i*segment*Math.PI/180)+circleinnerwidth+imgpadding)+"px"; thisspan.top=(theight*Math.cos(decrement+i*segment*Math.PI/180)+circleinnerheight+imgpadding)+"px"; thisspan.zIndex=parseInt(thisspan.top) op=parseInt((100/circleinnerheight*(parseInt(thisspan.top)*0.5))-imgpadding) if (op<5 && maxopacity[i]==1) { if (i_imgcounter>=rotatingimage.length) { i_imgcounter=0 } document.getElementById('span'+i).innerHTML="<a href='"+rotatinglink[i_imgcounter]+"'><img border=0 width="+imgwidth+" src='"+rotatingimage[i_imgcounter]+"' id='im"+i_imgcounter+"' onMouseover='stoprotating(this)' onMouseout='restartrotating()'></a><br>"+rotatingtext[i_imgcounter] document.getElementById('span'+i).style.visibility="visible" maxopacity[i]=-1 i_imgcounter++ } if (op>90) { maxopacity[i]=1 } if (ie) { var thisfilter=eval("document.getElementById('span"+i+"')") thisfilter.filters.alpha.opacity=op } else { var thisfilter=eval("document.getElementById('span"+i+"').style") thisspan.opacity=op/100 } } decrement-=step; tmr=setTimeout('rotatetext()', 50); } function stoprotating(thisobj) { clearTimeout(tmr) zoomobj=thisobj document.getElementById(zoomobj.id).style.width=(zoomfactor*imgwidth)+"px" document.getElementById(zoomobj.parentNode.parentNode.id).style.width=(zoomfactor*imgwidth)+"px" zoomobj.parentNode.parentNode.style.zIndex=9999 if (ie) { zoomobj.parentNode.parentNode.filters.alpha.opacity=100 } else { zoomobj.parentNode.parentNode.style.opacity=1 } } function restartrotating() { document.getElementById(zoomobj.id).style.width=imgwidth+"px" document.getElementById(zoomobj.parentNode.parentNode.id).style.width=imgwidth+"px" rotatetext() } document.write('<div id="roof" style="position:relative;width:'+circlewidth+'px;height:'+(circleheight+textboxheight)+'px;">') if (bgimg) { document.write('<img src="'+bgimg+'" width="'+circlewidth+'" height="'+(circleheight+textboxheight)+'">') } for (i=0;i<displaymax;i++) { document.write("<div id='span"+i+"' class='textstyle' style='filter:alpha(opacity=80);opacity:0.8;width:"+imgwidth+"px;visibility:hidden'></div>"); i_imgcounter++ if (i_imgcounter>=rotatingimage.length) { i_imgcounter=0 } } document.write('</div>'); window.onload=getpagesize; </script>