Script Immagini linkabili con scorrimento orizzontale su scripting di WebLink

E6 - Immagini linkabili con scorrimento orizzontale.

Funziona con il Browser:

Safari

opera

internet explorer

netscape navigator

Crediti: Peter Gehrig
Name: info@24fun.ch
Website: Sito Sparito dalla rete

Descrizione: Immagini grafiche che scorrono orizzontalmente, possono essere cliccate e quindi collegate a qualsiasi URL valido.

Passo 1 :

Selezionare tutto il codice cliccando sulla forbice, 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 fra i tags: <body> e </body> nel punto esatto dove far apparie l'effetto.

<script type="text/javascript"> // Prelevato ed illustrato su http://www.web-link.it // CREDITS: // Image Scroller 2.03 with double-fade effect // By Peter Gehrig // Copyright (c) 2003 Peter Gehrig. All rights reserved. // Permission given to use the script provided that this notice remains as is. // Additional scripts can be found at http://Sito Sparito dalla rete // info@24fun.com // 9/6/2002 // IMPORTANT: // If you add this script to a script-library or script-archive // you have to add a highly visible link to // http://Sito Sparito dalla rete on the webpage // where this script will be featured // URLs of slides var slideurl=new Array("pic1.jpg","pic2.jpg","pic3.jpg","pic4.jpg") // comments displayed below the slides var slidecomment=new Array("Mary","Jane","Rita","Tina") // links for each slide var slidelink=new Array("http://forum.web-link.it","http://www.web-link.it/scripting/scripting.htm","http://www.web-link.it/applets/applets.htm","http://www.web-link.it/grafica/grafica.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=160 // the height of the slideshow (pixels) var scrollerheight=100 // 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>

Note : nelle prime righe di codice dello script trovate le variabili:

var slideurl=new Array("pic1.jpg","pic2.jpg","pic3.jpg","pic4.jpg")" = nomi delle immagini.

var slidecomment=new Array("Mary","Jane","Rita","Tina") = 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

Elenco completo degli script.

Puoi lasciarmi un msg, un suggerimento, una critica, un link.

Anche il tuo sito puo far parte di questo spazio pubblicitario

Clicca qui se vuoi informazioni per fare anche tu pubblicità su questo sito