Glamour Graphic - Grafica e risorse per il tuo spazio web!

Link che nevica

Links ad effetto se ne vedono molti, questo per esempio genera una nevicata al solo passaggio del mouse:

PASSA QUI IL MOUSE

1:Copiate il seguente script nel vostro codice html tra i tag <body></body>

<script> // Prelevato ed illustrato su http://www.web-link.it // CREDITS: // Snowing Links // By Peter Gehrig // Copyright (c) 2004 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 // 10/27/2004 // 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 /////////////////////////////////////////////////////////////////////////// // CONFIGURATION STARTS HERE /////////////////////////////////////////////////////////////////////////// // Set the number of snowflakes (more than 30 - 40 not recommended) var snowmax=35 // Set the colors for the snow. Add as many colors as you like var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD") // Set the fonts, that create the snowflakes. Add as many fonts as you like var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS") // Set the letter that creates your snowflake (recommended:*) var snowletter="*" // Set the speed of sinking (recommended values range from 0.3 to 2) var sinkspeed=0.6 // Set the maximal-size of your snowflaxes var snowmaxsize=22 // Set the minimal-size of your snowflaxes var snowminsize=8 // Set the width of the snowing-zone (pixels) var snowboxwidth=100 /////////////////////////////////////////////////////////////////////////// // CONFIGURATION ENDS HERE /////////////////////////////////////////////////////////////////////////// // Do not edit below this line var snow=new Array() var marginbottom var marginright var marginleft var margintop var snowingzone=1 var posleft var postop var is_snowing=false var timer var i_snow=0 var x_mv=new Array(); var crds=new Array(); var lftrght=new Array(); var browserinfos=navigator.userAgent var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/) var ns6=document.getElementById&&!document.all var opera=browserinfos.match(/Opera/) var browserok=ie5||ns6||opera function randommaker(range) { rand=Math.floor(range*Math.random()) return rand } function startsnow() { is_snowing=true if (ie5 || opera) { margintop = postop+15 marginbottom = document.body.clientHeight marginleft = posleft marginright = posleft+snowboxwidth } else if (ns6) { margintop = postop+15 marginbottom = window.innerHeight marginleft = posleft marginright = posleft+snowboxwidth } var snowsizerange=snowmaxsize-snowminsize for (i=0;i<=snowmax;i++) { crds[i] = 0; lftrght[i] = Math.random()*15; x_mv[i] = 0.03 + Math.random()/10; snow[i]=document.getElementById("s"+i) snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)] snow[i].size=randommaker(snowsizerange)+snowminsize snow[i].style.fontSize=snow[i].size snow[i].style.color=snowcolor[randommaker(snowcolor.length)] snow[i].sink=sinkspeed*snow[i].size/5 snow[i].posx=randommaker(snowboxwidth)+marginleft-2*snow[i].size if (ie5 || opera) { if (snow[i].posx>=document.body.clientWidth-2*snow[i].size) { snow[i].posx=snow[i].posx-snowboxwidth } } if (ns6) { if (snow[i].posx>=window.innerWidth-2*snow[i].size) { snow[i].posx=snow[i].posx-snowboxwidth } } snow[i].posy=randommaker(marginbottom-margintop)+margintop-2*snow[i].size snow[i].style.left=snow[i].posx snow[i].style.top=snow[i].posy snow[i].style.visibility="visible"; } movesnow() } function stopsnow() { is_snowing=false } function movesnow() { if (is_snowing) { for (i=0;i<=snowmax;i++) { crds[i] += x_mv[i]; snow[i].posy+=snow[i].sink snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]); snow[i].style.top=snow[i].posy if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){ snow[i].posx=randommaker(snowboxwidth)+marginleft-2*snow[i].size if (ie5 || opera) { if (snow[i].posx>=document.body.clientWidth-2*snow[i].size) { snow[i].posx=snow[i].posx-snowboxwidth } } if (ns6) { if (snow[i].posx>=window.innerWidth-2*snow[i].size) { snow[i].posx=snow[i].posx-snowboxwidth } } snow[i].posy=randommaker(marginbottom-margintop)+margintop-2*snow[i].size } } var timer=setTimeout("movesnow()",50) } else { for (i=0;i<=snowmax;i++) { snow[i].style.visibility="hidden"; } } } function getcoordinates(e) { if (ie5 || opera) { posleft=document.body.scrollLeft+window.event.x; postop=document.body.scrollTop+window.event.y; } if (ns6) { posleft=e.pageX postop=e.pageY } } for (i=0;i<=snowmax;i++) { document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>") } if (browserok) { document.onmousemove=getcoordinates } </script>

2:Adesso si deve aggiungere ai vari links il comando onMouseOver che richiama l'effetto.

3:Copiate ora il secondo codice e incollatelo ovviamente nel posto in cui dovrà comparire il link.

4:Modificate il link e la frase da esplodere.

Quindi sostituisci (nel codice sottostante) http://www.tuosito.it e tuo Link con l'url del tuo sito e il nome che vuoi dare al tuo link

<a href="http://www.tuosito.it" onMouseOver="startsnow()" onMouseOut="stopsnow()">tuo Link</a>

Note :

E' possibile configurare la velocità, le dimensioni, i colori, il tipo di font ed il numero di fiocchi che formano la nevicata. Nelle prime righe di codice dello script trovate le variabili:

var snowmax=35 = numero di fiocchi che formano la nevicata.

var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD") = colori in codice esadecimale dei fiocchi di neve.

var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS") = il tipo di font adoperato per il carattere dei fiocchi di neve.

var snowletter="*" = il carattere adoperato per il fiocco di neve.

var sinkspeed=0.6 = la velocità con la quale scende la neve.

var snowmaxsize=22 = la dimensione max del fiocco più grande.

var snowminsize=8 = la dimensione min del fiocco più piccolo.

var snowboxwidth=100 = la dimensione della zona interessata alla nevicata.