Links che esplodono frasi o caratteri

Links che esplodono frasi

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.

Link di Prova

Questo il primo link di prova, con frase Grafica Augusto

Questo invece il secondo con un carattere: * ma qualsiasi altro andrebbe benissimo.

Ed infine un'altra frase provate voi stessi..

Trasferire il tutto nella vostra pagina web, in questo caso immediatamente prima del tag: di chiusura Body.
ATTENZIONE non inserire il codice in tabelle o all'interno di tags <DIV> e </DIV> non funzionerebbe vista la struttura dello script!

<SCRIPT> // Prelevato ed illustrato su http://www.graficaugusto.org // CREDITS: // LinkExploder 3 by Peter Gehrig // Copyright (c) 2003 Peter Gehrig. All rights reserved. // Permission given to use the script provided that this notice remains as is. /////////////////////////////////////////////////////////////////////////// // CONFIGURATION STARTS HERE /////////////////////////////////////////////////////////////////////////// // Set the number of sparkles. Add or remove as many as you like. var sparklenumber=20 // Set the fonts that create the sparkles. Add or remove as many as you like. var sparklefont=new Array("Arial","Times","Comic Sans MS") // Set the sizes of sparkles (pixels). Add or remove as many as you like. var sparklesize=new Array(5,10,15,20) // Set colors of sparkles. Add or remove as many as you like. var sparklecolor=new Array("#FF0000","#000066","#444400","#006600") // Set the speed (higher=slower) var speed=20 /////////////////////////////////////////////////////////////////////////// // CONFIGURATION ENDS HERE /////////////////////////////////////////////////////////////////////////// // Do not edit below this line var sparklesizeNS4=new Array() var x_sparklepos var y_sparklepos var x,y var x_random=new Array() var y_random=new Array() var max_explsteps=80 var i_explsteps=0 var i_color=0 var i_size=0 var i_font=0 var marginbottom var marginright var sparklewidth=20 var sparkleheight=20 var isloaded=false var browserinfos=navigator.userAgent var ie4=document.all&&!document.getElementById&&!browserinfos.match(/Opera/) var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/) var ns4=document.layers var ns6=!document.all&&document.getElementById&&!browserinfos.match(/Opera/) var opera=browserinfos.match(/Opera/) var browserok=ie4||ie5||ns4||ns6||opera for (i=0;i<=sparklesize.length;i++) { sparklesizeNS4[i]=Math.round(sparklesize[i]/5) if (sparklesizeNS4[i]<1) {sparklesizeNS4[i]=1} if (sparklesizeNS4[i]>7) {sparklesizeNS4[i]=7} } function initlinkexploder() { isloaded=true } function startexplosion(whatword) { if (isloaded) { i_explsteps=0 x_sparklepos=x y_sparklepos=y for (i=0;i<=sparklenumber;i++) { x_random[i]=Math.ceil(20*Math.random())-10 y_random[i]=Math.ceil(20*Math.random())-10 while(x_random[i]>-2 && x_random[i]<2) { x_random[i]=Math.ceil(20*Math.random())-10 y_random[i]=Math.ceil(20*Math.random())-10 } } if (ie4) { marginbottom = document.body.clientHeight marginright = document.body.clientWidth for (i=0;i<=sparklenumber;i++) { var thisspan=eval("document.all.span"+i+".style") thisspan.visibility="VISIBLE" thisspan.posLeft=x_sparklepos thisspan.posTop=y_sparklepos var thisspan=eval("document.all.span"+i) thisspan.innerHTML=whatword } } if (ie5||opera) { marginbottom=document.body.clientHeight marginright=document.body.clientWidth for (i=0;i<=sparklenumber;i++) { var thisspan=document.getElementById("span"+i).style thisspan.visibility="VISIBLE" thisspan.left=x_sparklepos thisspan.top=y_sparklepos var thisspan=document.getElementById("span"+i) thisspan.innerHTML=whatword sparklewidth=parseInt(thisspan.offsetWidth) sparkleheight=parseInt(thisspan.offsetHeight) } } if (ns6) { marginbottom=window.innerHeight marginright=window.innerWidth for (i=0;i<=sparklenumber;i++) { var thisspan=document.getElementById("span"+i).style thisspan.visibility="VISIBLE" thisspan.left=x_sparklepos thisspan.top=y_sparklepos var thisspan=document.getElementById("span"+i) thisspan.innerHTML=whatword sparklewidth=parseInt(thisspan.offsetWidth) sparkleheight=parseInt(thisspan.offsetHeight) } } if (ns4) { marginbottom=window.innerHeight marginright=window.innerWidth for (i=0;i<=sparklenumber;i++) { i_color++;i_font++;i_size++; if (i_color>=sparklecolor.length) {i_color=0} if (i_font>=sparklefont.length) {i_font=0} if (i_size>=sparklesizeNS4.length) {i_size=0} var thisspan=eval("document.span"+i) thisspan.visibility="VISIBLE" thisspan.left=x_sparklepos thisspan.top=y_sparklepos var thisspan=eval("document.span"+i+".document") thisspan.write("<font face="+sparklefont[i_font]+" color="+sparklecolor[i_color]+" size="+sparklesizeNS4[i_size]+">") document.write(whatword) document.write("</font>") thisspan.close() } } explode() } } function explode() { if (i_explsteps<=max_explsteps) { for (i=0;i<=sparklenumber;i++) { if (ie4) { var thisspan=eval("document.all.span"+i+".style") if (thisspan.posLeft>=marginright || thisspan.posTop>=marginbottom) { thisspan.posLeft=-1000 thisspan.posTop=-1000 } else { thisspan.visibility="VISIBLE" thisspan.posLeft+=x_random[i] thisspan.posTop+=y_random[i] } } if (ie5||ns6||opera) { var thisspan=document.getElementById("span"+i).style if (parseInt(thisspan.left)>=marginright-sparklewidth-30+document.body.scrollLeft || parseInt(thisspan.top)>=marginbottom-sparkleheight-20+document.body.scrollTop) { thisspan.left=-1000 thisspan.top=-1000 } else { thisspan.visibility="VISIBLE" thisspan.left=parseInt(thisspan.left)+x_random[i] thisspan.top=parseInt(thisspan.top)+y_random[i] } } if (ns4) { var thisspan=eval("document.span"+i) thisspan.visibility="VISIBLE" thisspan.left+=x_random[i] thisspan.top+=y_random[i] } } i_explsteps++ var timer=setTimeout("explode()",speed) } else { for (i=0;i<=sparklenumber;i++) { if (ie4) {var thisspan=eval("document.all.span"+i+".style")} if (ie5||ns6||opera) {var thisspan=document.getElementById("span"+i).style} if (ns4) {var thisspan=eval("document.span"+i)} thisspan.visibility="HIDDEN" } clearTimeout(timer) } } function handlerMM(e){ x = (ns4||ns6) ? e.pageX : document.body.scrollLeft+event.clientX y = (ns4||ns6) ? e.pageY : document.body.scrollTop+event.clientY } if (ns4){ document.captureEvents(Event.MOUSEMOVE); } document.onmousemove=handlerMM; document.write("<style>") document.write(".spanstyle {") document.write("position:absolute;") document.write("visibility:hidden;") document.write("}") document.write("</style>") for (i=0;i<=sparklenumber;i++) { if (ie4||ie5||ns6||opera) { document.write("<div id='span"+i+"' class='spanstyle' style='font-family:"+sparklefont[i_font]+";font-size:"+sparklesize[i_size]+"px;color:"+sparklecolor[i_color]+";'>") document.write(".") document.write("</div>") i_color++;i_font++;i_size++; if (i_color>=sparklecolor.length) {i_color=0} if (i_font>=sparklefont.length) {i_font=0} if (i_size>=sparklesize.length) {i_size=0} } if (ns4) { document.write("<div id='span"+i+"' class='spanstyle'>") document.write("<font face="+sparklefont[i_font]+" color="+sparklecolor[i_color]+" size="+sparklesizeNS4[i_size]+">") document.write("....") document.write("</font>") document.write("</div>") i_color++;i_font++;i_size++; if (i_color>=sparklecolor.length) {i_color=0} if (i_font>=sparklefont.length) {i_font=0} if (i_size>=sparklesizeNS4.length) {i_size=0} } } if (browserok) { window.onload=initlinkexploder } </script>

Adesso si deve aggiungere ai vari links il comando onMouseOver che richiama l'effetto, sempre nella pagina Body, vedi esempio qui sotto.

<a href="http://www.graficaugusto.org" onMouseOver="startexplosion('love')">tuo Link</a>
E' possibile configurare la velocità di esplosione, le dimensioni, i colori, il tipo di font ed il numero di pezzi che formano l'esplosione stessa. Nelle prime righe di codice dello script trovate le variabili:
var sparklenumber=20 = numero di frasi (pezzi) che formano l'esplosione.
var sparklefont=new Array("Arial","Times","Comic Sans MS")	= i fonts che compongono la frase da esplodere.
var sparklesize=new Array(5,10,15,20) = le dimensioni in pixel delle frasi da esplodere.
var sparklecolor=new Array("#FF0000","#000066""#444400","#006600")	= i colori in esadecimane delle frasi da esplodere.
var speed=40 = la velocità con la quale le frasi si allontanano dal punto di esplosione. (maggiore il numero più lento l'effetto)