Javascript
Colorazione dei collegamenti al passaggio del mouse
Lo script vi presenterò oggi è veramente originale. Finora non ho visto nessun sito presentare uno script come questo. Il fine di questo script è quello di migliorare l'aspetto grafico del sito: tutti i collegamenti che la pagina presenta, al passaggio del mouse, verranno colorati di un colore scelto casualmente. In parole semplici, se creiamo un collegamento con il solito tag a:
HTML
<a href="#">Questo è un collegamento</a>
questo inizialmente avrà un colore proprio, ma quando ci si passa sopra con il mouse, il suo colore diventerà il colore casuale del momento e, a differenza dei semplici effetti a:hover di CSS, rimarrà così anche se il mouse si dovrà spostare dal collegamento, fino a quando non ci si passa di nuovo con il mouse: così cambierà il suo colore di nuovo.
L'effetto prodotto è una serie di collegamenti ognuno di un colore diverso o simile (visto che il colore che verrà assegnato al collegamento è generato in continuazione, a volte può capitare che si avranno 2 colori dei collegamenti uguali), ma il meglio è quando si hanno tanti collegamenti in serie: se proverete a passare velocemente il mouse in ordine, vedrete che assumeranno una colorazione a sfumatura.
Il codice è questo:
HTML
<script type="text/javascript">
var r = 255;
var v = 0;
var b = 0;
var stato = 0;
var variazione = 17;
var coloreAttuale= "#FF0000";
function getNextColor(){
switch(stato){
case 0:
r-=variazione;
if(r<0){ r = 0;}
v+=variazione;
if(v>=255){ v = 255;stato = 1;
}
break;
case 1:
v-=variazione;
if(v<0){ v = 0;}
b+=variazione;
if(b>=255){b = 255;stato = 2;}
break;
case 2:
b-=variazione;
if(b<0){ b = 0; }
r+=variazione;
if(r>=255){r = 255; stato = 0;}
break;
}
return "#"+toEsa(r)+toEsa(v)+toEsa(b);
}
function toEsa(valore){
var daRest = valore.toString(16);
if(daRest.length==1)
daRest= "0"+daRest;
return daRest;
}
setInterval("coloreAttuale= getNextColor()",50);
var anchors = document.getElementsByTagName("a");
for(var i = 0; i< anchors.length;i++){
anchors[i].onmouseover = function(){
this.style.color = coloreAttuale;
}
}
</script>
var r = 255;
var v = 0;
var b = 0;
var stato = 0;
var variazione = 17;
var coloreAttuale= "#FF0000";
function getNextColor(){
switch(stato){
case 0:
r-=variazione;
if(r<0){ r = 0;}
v+=variazione;
if(v>=255){ v = 255;stato = 1;
}
break;
case 1:
v-=variazione;
if(v<0){ v = 0;}
b+=variazione;
if(b>=255){b = 255;stato = 2;}
break;
case 2:
b-=variazione;
if(b<0){ b = 0; }
r+=variazione;
if(r>=255){r = 255; stato = 0;}
break;
}
return "#"+toEsa(r)+toEsa(v)+toEsa(b);
}
function toEsa(valore){
var daRest = valore.toString(16);
if(daRest.length==1)
daRest= "0"+daRest;
return daRest;
}
setInterval("coloreAttuale= getNextColor()",50);
var anchors = document.getElementsByTagName("a");
for(var i = 0; i< anchors.length;i++){
anchors[i].onmouseover = function(){
this.style.color = coloreAttuale;
}
}
</script>
A differenza della maggior parte dei codici, questo dovrà essere inserito in fondo alla pagina, cioè come ultime riga prima della chiusura del tag body.
Questo script utilizza i metodi toString() e document.getElementsByTag() che purtroppo non sono utilizzabili su forumfree/forumcommunity/blogfree per motivi legati alla integrità del forum/blog. Il circuito ha deciso di "disabilitarli" in quanto è possibile scrivere dei codici che potrebbero, ad esempio, rendere inutilizzabili tutti i collegamenti della homepage (vietando, quindi, agli admin di accedere alla sezione amministrazione per disabilitare il codice dannoso) rendendo il forum letteralmente inutilizzabile.
Edited by Red eYe - 30/11/2008, 03:29
.
