WebLink - Tutto per la costruzione delle tue pagine web

Immagini linkabili con scorrimento orizzontale.

Crediti: Peter Gehrig
Name: [email protected]
Website: www.24fun.com

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> // 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://www.24fun.com // 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://www.24fun.com 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.