Rotazione immagini cliccabili

Rotazione immagini cliccabili

Traduci questa paginaMicrosoft® Translator

Passa il Mouse all'interno della finestra per selezionare lo script quindi "CTRL+C" (copia) mettete il cursore dove volete inserire Javascript nella vostra pagina Web, andate nel codice html e fate "CTRL+V" (incolla) dove vedete il cursore lampeggiante.

Copia quanto segue ed inseriscilo tra <body> e </body> esattamente dove vuoi che venga vilsualizzato lo scorrimento delle immagine.

<script type="text/javascript"> // Prelevato ed illustrato su http://www.graficaugusto.org // URLs of slides var slideurl=new Array("Mini_Gif/1.gif","Mini_Gif/2.gif","Mini_Gif/3.gif","Mini_Gif/4.gif") // comments displayed below the slides var slidecomment=new Array("gif 1","gif 2","gif 3","gif 4") // links for each slide var slidelink=new Array("http://www.graficaugusto.org/Mini_Gif.htm","http://www.graficaugusto.org/Mini_Gif.htm","http://www.graficaugusto.org/Mini_Gif.htm","http://www.graficaugusto.org/Mini_Gif.htm") // targets of the links. Allowed values: "_parent", "_top", "_blank", "_self" var slidetarget=new Array("_blank","_blank","_blank","_blank") // the width of the slideshow (pixels) var scrollerwidth=100 // the height of the slideshow (pixels) var scrollerheight=120 // width of the transparent zones (pixels) var translayerszone=40 // font-attributes for the comments var slidefont="Arial" var slidefontcolor="blue" var slidefontsize="2" // background-color of webpage var pagebgcolor="#FFFFFF" // do not edit below this line var translayerswidth=1 var translayersmax=Math.floor(translayerszone/translayerswidth) var translayersleftpos=0 var translayersopacity=100 var translayersfactor=100/translayersmax var translayerswidthall=translayersmax*translayerswidth var allpicturewidth var distancepictopic=0 var scrollerleft=0 var scrollertop=0 var pause=20 var step=2 var newstep=step var clipleft,clipright,cliptop,clipbottom var i_picture=0 var timer var picturecontent="" var ns4=document.layers?1:0 var ns6=document.getElementById&&!document.all?1:0 var ie=document.all?1:0 var browserinfos=navigator.userAgent var opera=browserinfos.match(/Opera/) var preloadedimages=new Array() for (i=0;i<slideurl.length;i++){ preloadedimages[i]=new Image() preloadedimages[i].src=slideurl[i] } function init() { if (ie) { allpicturewidth=document.all.picturediv.offsetWidth document.all.picturediv.style.posTop=scrollertop document.all.picturediv.style.posLeft=scrollerleft+scrollerwidth clipleft=0 clipright=0 cliptop=0 clipbottom=scrollerheight document.all.picturediv.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" document.all.picturediv.style.visibility="visible" scrollpicture() } if (ns6) { allpicturewidth=document.getElementById('emptypicturediv').offsetWidth document.getElementById('picturediv').style.top=scrollertop document.getElementById('picturediv').style.left=scrollerleft+scrollerwidth clipleft=0 clipright=0 cliptop=0 clipbottom=scrollerheight document.getElementById('picturediv').style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" document.getElementById('picturediv').style.visibility="visible" scrollpicture() } if (ns4) { allpicturewidth=document.roof.document.picturediv.document.width document.roof.document.picturediv.top=scrollertop document.roof.document.picturediv.left=scrollerleft+scrollerwidth document.roof.document.picturediv.clip.left=0 document.roof.document.picturediv.clip.right=0 document.roof.document.picturediv.clip.top=0 document.roof.document.picturediv.clip.bottom=scrollerheight document.roof.document.picturediv.visibility="visible" scrollpicture() } } function scrollpicture() { if (ie) { if (document.all.picturediv.style.posLeft>=scrollerleft-allpicturewidth) { document.all.picturediv.style.posLeft-=step clipright+=step if (clipright>scrollerwidth) { clipleft+=step } document.all.picturediv.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" var timer=setTimeout("scrollpicture()",pause) } else { resetposition() } } if (ns6) { if (parseInt(document.getElementById('picturediv').style.left)>=scrollerleft-allpicturewidth) { document.getElementById('picturediv').style.left=parseInt(document.getElementById('picturediv').style.left)-step clipright+=step if (clipright>scrollerwidth) { clipleft+=step } document.getElementById('picturediv').style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" var timer=setTimeout("scrollpicture()",pause) } else { resetposition() } } if (ns4) { if (document.roof.document.picturediv.left>=scrollerleft-allpicturewidth) { document.roof.document.picturediv.left-=step document.roof.document.picturediv.clip.right+=step if (document.roof.document.picturediv.clip.right>scrollerwidth) { document.roof.document.picturediv.clip.left+=step } var timer=setTimeout("scrollpicture()",pause) } else { resetposition() } } } function onmsover() { step=0 } function onmsout() { step=newstep } function resetposition() { if (ie) { document.all.picturediv.style.posLeft=scrollerleft+scrollerwidth clipleft=0 clipright=0 document.all.picturediv.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" scrollpicture() } if (ns6) { allpicturewidth=document.getElementById('emptypicturediv').offsetWidth document.getElementById('picturediv').style.left=scrollerleft+scrollerwidth clipleft=0 clipright=0 document.getElementById('picturediv').style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" scrollpicture() } if (ns4) { document.roof.document.picturediv.left=scrollerleft+scrollerwidth document.roof.document.picturediv.clip.left=0 document.roof.document.picturediv.clip.right=0 scrollpicture() } } picturecontent="" picturecontent+="<table cellpadding=2 cellspacing=0>" picturecontent+="<tr>" for (i=0;i<=slideurl.length-1;i++) { picturecontent+="<td>" picturecontent+="<a href=\""+slidelink[i]+"\" target=\""+slidetarget[i]+"\" onMouseOver=\"javascript:onmsover()\" onMouseOut=\"javascript:onmsout()\">" picturecontent+="<img src=\""+slideurl[i]+"\" border=0></a>" picturecontent+="</td>" } picturecontent+="</tr>" picturecontent+="<tr>" for (i=0;i<=slideurl.length-1;i++) { picturecontent+="<td>" picturecontent+="<font face=\""+slidefont+"\" color=\""+slidefontcolor+"\" size="+slidefontsize+">" picturecontent+=slidecomment[i] picturecontent+="</font>" picturecontent+="</td>" } picturecontent+="</tr>" picturecontent+="</tr></table>" if (ie || ns6) { document.write('<div style="position:relative;width:'+scrollerwidth+'px;height:'+scrollerheight+'px;overflow:hidden">') document.write('<div id="picturediv" style="position:absolute;top:0px;left:0px;height:'+scrollerheight+'px;visibility:hidden">'+picturecontent+'</div>') if (ie && !opera) { for (i=0;i<=translayersmax;i++) { document.write('<span ID="trans'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+pagebgcolor+';filter:alpha(opacity='+translayersopacity+');overflow:hidden"> </span>') translayersleftpos+=translayerswidth translayersopacity-=translayersfactor } translayersleftpos=scrollerwidth-translayersleftpos for (ii=0;ii<=translayersmax;ii++) { document.write('<span ID="trans'+ii+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+pagebgcolor+';filter:alpha(opacity='+translayersopacity+');overflow:hidden"> </span>') translayersleftpos+=translayerswidth translayersopacity+=translayersfactor } } if (ns6 && !opera) { for (i=0;i<=translayersmax-1;i++) { document.write('<span ID="transleft'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+pagebgcolor+';-moz-opacity:'+translayersopacity/100+';overflow:hidden"> </span>') translayersleftpos+=translayerswidth translayersopacity-=translayersfactor if (translayersopacity<0) {translayersopacity=0.001} } translayersleftpos=scrollerwidth-translayersleftpos translayersopacity=0.001 for (i=0;i<=translayersmax-1;i++) { document.write('<span ID="transright'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+pagebgcolor+';-moz-opacity:'+translayersopacity/100+';"> </span>') translayersleftpos+=translayerswidth translayersopacity+=translayersfactor } } document.write('</div>') document.write('<div id="emptypicturediv" style="position:absolute;top:0px;left:0px;height:'+scrollerheight+'px;visibility:hidden">'+picturecontent+'</div>') window.onload=init } if (ns4) { document.write('<ilayer name="roof" width='+scrollerwidth+' height='+scrollerheight+'>') document.write('<layer name="picturediv" width='+scrollerwidth+' height='+scrollerheight+' visibility=hide>'+picturecontent+'</layer>') document.write('</ilayer>') window.onload=init } </script>

nelle prime righe di codice dello script trovate le variabili:

var slideurl=new Array("gif1.gif","gif2.gif","gif3.gif","gif4.gif")" = nomi delle immagini.

var slidecomment=new Array("gif1","gif2","gif3","gif4")
= nomi associati alle immagini da visualizzarsi immediatamente sotto le stesse.

var slidelink=new Array("url1","url2","url3","url4") = I vari URL associati come links alle Immagini.

var slidetarget=new Array("_blank","_blank","_blank","_blank")
= destinazione dei links ("_parent", "_top", "_blank", "_self")

var scrollerwidth=160 = dimensione in larghezza della finestra di scrolling (in pixel)

var scrollerheight=100 = dimensione in altezza della finestra di scrolling (in pixel)

var translayerszone=40 = dimensione dei bordi in trasparenza per la zona laterale destra sinistra

var pagebgcolor="#FFFFFF" = colore dei bordi in trasparenza per la zona laterale destra sinistra

Le immagini sono copyright dei rispettivi proprietari