Messaggi animati colorati e cliccabili

Messaggio animati colorati
e cliccabili

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.

Esempio

Una serie di messaggi cliccabili, con colori ed effetti variabili da inserire obbligatoriamente all'interno di una tabella.

Trasferire il tutto nella vostra pagina web, in questo caso all'interno dei tags: <Head> </Head>

Trasferire il tutto nella vostra pagina web, in questo caso all'interno dei tags: <Body> </Body>

<table width=400 height=200 border=0 cellpadding=0 cellspacing=0 align="center"> <tr><td> <SCRIPT> // 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 var text=new Array() var textlink=new Array() var texttarget=new Array() ///////////////////////////////////////////////////////////////////// // EDITZONE STARTS HERE //////////////////////////////////////////////////////////////////// // Add your messages. They should be rather short. // They should have the same length more or less. text[0]="CIAO" text[1]="TI PIACE" text[2]="QUESTO" text[3]="BELLISSIMO" text[4]="SCRIPT?" text[5]="NON TI" text[6]="RESTA CHE" text[7]="SEGUIRE LE" text[8]="ISTRUZIONI" // Add a link for each message // If you don't want to link a message enter "#" instead (see sample below) textlink[0]="http://www.graficaugusto.org" textlink[1]="#" textlink[2]="#" textlink[3]="#" textlink[4]="#" textlink[5]="#" textlink[6]="#" textlink[7]="#" textlink[8]="#" textlink[9]="#" // Add a target-window for each link // Possible values: "_blank","_top", "_self", "_parent" or the name of a frame texttarget[0]="_blank" texttarget[1]="_top" texttarget[2]="_parent" texttarget[3]="_self" texttarget[4]="_blank" texttarget[5]="_top" texttarget[6]="_parent" texttarget[7]="_self" texttarget[8]="_self" texttarget[9]="_self" // Set the font var textfont="Arial Black" // Add as many font-colors as you like var textfontcolor=new Array("#FF0000","#0000FF","#00FF00","#660000") // Add as many font-outline-colors as you like var outlinecolor=new Array("#000000","#000000","#FDCF15") // Add as many font-shadow-colors as you like var shadowcolor=new Array("#FFFF00","#00FFFF","#FDCF15") // Set the font-rollovercolor (required for Netscape and Opera only) var textfontcolorrollover="#ff0000" // Set the font-size (required for Netscape and Opera only) var textfontsize=20 // Set the background-color var textbgcolor="#000000" // Set "bold" or "normal" (required for Netscape and Opera only) var textweight="normal" // Set "italic" or "normal" (required for Netscape and Opera only)rsiv sein soll var textitalic="normal" // Set width and height of your Fun Ticker (pixels) // IMPORTANT: width and height must also be set in the table (see top of code) var textwidth=400 var textheight=200 // Set the delay between the messages (seconds) var textpause=2 // Set the width of the funticker's border (pixels) var funtickerborder=3 // Set the color of the funticker's border var funtickerbordercolor="#FDCF15" // Set the width of the font-outline (pixels) var widthfontoutline=1 // Set the strength of the font's opacity (transparency of letters) var fontopacity="50%" // Set the strength of the shadow's opacity (transparency of shadow) var shadowopacity="50%" // Set true if your font should display a gradient effect // Set false if your font should display NO gradient effect var applygradient=true // Enter a value between 0 and 3 to set the shape for your messages // If you enter 4 all shapes will be applied var i_shape=4 ///////////////////////////////////////////////////////////////////// // EDITZONE ENDS HERE /////////////////////////////////////////////////////////////////// var path=new Array() path[0]="m20 0c300 140,300 50,580, 0m20 300c400 100,300 250,580 300e" path[1]="m20 100c300 -50,300 50,580, 100m20 200c300 400,300 300,580 200e" path[2]="m20 120c300 100,300 50,580, 0m20 180c300 180,300 300,580 300e" path[3]="m20 0c300 140,300 50,580, 0m150 300c400 100,300 250,450 300e" var i_path=0 var speed=60 var textdecoration="none" var innerwidth=Math.floor(0.90*textwidth) var innerheight=Math.floor(0.90*textheight) var posleft=Math.floor((textwidth-innerwidth)/2-funtickerborder) var postop=Math.floor((textheight-innerheight)/2) var i_message=0 var i_messagelength=0 var i_outlinecolor=0 var i_textfontcolor=0 var i_shadowcolor=0 var textalign="center" var textvalign="middle" var textitalicA="" var textitalicB="" var textweightA="" var textweightB="" var textfontsizeHTML=1 var i_mes=0 var i_substring=0 var i_presubstring=0 var i_text=0 var textcontent="" var notag=true var textpresubstring="" var textaftersubstring="" textpause*=1000 var browserinfos=navigator.userAgent var ie4=!document.getElementById&&document.all&&!browserinfos.match(/Opera/) var ie5=document.getElementById&&document.all&&!browserinfos.match(/Opera/) var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/) var opera=browserinfos.match(/Opera/) function gettextcontent() { tablewidth=textwidth-2*funtickerborder tableheight=textheight-2*funtickerborder textpresubstring=text[i_text].substring(0,i_presubstring) var i_prepre=i_presubstring-1 if (i_prepre<0) {i_prepre=0} if (text[i_text].substring(i_prepre,i_presubstring)=="<"){notag=false} if (text[i_text].substring(i_prepre,i_presubstring)==">"){notag=true} if (notag) { textcontent="<table border=0 cellpadding=4 width="+tablewidth+" height="+tableheight+"><tr valign="+textvalign+"><td align="+textalign+">" textcontent+="<a href='"+textlink[i_text]+"' target='"+texttarget[i_text]+"' style='position:relative; font-family:"+textfont+";text-decoration:"+textdecoration+";font-family:"+textfont+";color:"+textfontcolor[i_textfontcolor]+";font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+"' onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolor[i_textfontcolor]+"\'\">" textcontent+=textpresubstring textcontent+="</a>" textcontent+="</td></tr></table>" } } function showtickerNS6() { textcontent="<table border=0 cellpadding=4 width="+textwidth+" height="+textheight+"><tr valign="+textvalign+"><td align="+textalign+">" textcontent+="<a href='"+textlink[i_text]+"' target='"+texttarget[i_text]+"' style='position:relative; font-family:"+textfont+";text-decoration:"+textdecoration+";font-family:"+textfont+";color:"+textfontcolor[i_textfontcolor]+";font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+"' onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolor[i_textfontcolor]+"\'\">" textcontent+=text[i_text] textcontent+="</a>" textcontent+="</td></tr></table>" document.getElementById("ticker").innerHTML=textcontent i_text++ i_textfontcolor++ if (i_text>=text.length) {i_text=0} if (i_textfontcolor>=textfontcolor.length-1) {i_textfontcolor=0} var timer=setTimeout("showtickerNS6()", textpause) } function showticker() { if (i_substring<=text[i_text].length) { i_substring++ i_presubstring=i_substring-1 if (i_presubstring<0) {i_presubstring=0} gettextcontent() if (opera) { document.getElementById("ticker").innerHTML=textcontent var timer=setTimeout("showticker()", speed) } } else { clearTimeout(timer) var timer=setTimeout("changetext()", textpause) } } function changetext() { i_substring=0 i_presubstring=0 i_text++ i_textfontcolor++ i_path++ if (i_text>text.length-1) {i_text=0} if (i_textfontcolor>textfontcolor.length-1) {i_textfontcolor=0} showticker() } function changeform() { if (i_outlinecolor >= outlinecolor.length) {i_outlinecolor=0} if (i_textfontcolor >= textfontcolor.length) {i_textfontcolor=0} if (i_shadowcolor >= shadowcolor.length) {i_shadowcolor=0} if (i_path>path.length-1) {i_path=0} document.getElementById('strokeid').color=outlinecolor[i_outlinecolor] document.getElementById('fillid').color=textfontcolor[i_textfontcolor] document.getElementById('shadowid').color=shadowcolor[i_shadowcolor] if (i_shape==path.length) { document.getElementById('shapeid').path=path[i_path] } if (i_message < text.length) { tick() } else {i_message=0;tick()} } function tick() { if (i_messagelength <= text[i_message].length) { var messagestringend="" var messagestring=text[i_message].substring(0, i_messagelength)+messagestringend document.getElementById('textpathid').string=messagestring var timer=setTimeout("tick()",speed) i_messagelength++ } else { clearTimeout(timer) var timer=setTimeout("prechangeform()",textpause) } } function prechangeform() { i_messagelength=0 i_message++ i_outlinecolor++ i_textfontcolor++ i_shadowcolor++ i_path++ changeform() } function openlink() { if (texttarget[i_message]=="_blank") { codepopup=window.open(textlink[i_message], "code", "status=yes,location=yes,toolbar=yes,menubar=yes,resizable=yes,scrollbars=yes,width=770,height=460,top=10,left=10"); } else if (texttarget[i_message]=="_top") { top.location.href=textlink[i_text] } else if (texttarget[i_message]=="_parent") { parent.location.href=textlink[i_text] } else if (texttarget[i_message]=="_self") { document.location.href=textlink[i_text] } else { var jumpto=eval("parent."+texttarget[i_text]) jumpto.location.href=textlink[i_text] } } if (ie5) { document.write('<div ID="roof" style="position:relative;width:'+textwidth+'px;height:'+textheight+'px;border-style:solid;border-width:'+funtickerborder+'px;border-color:'+funtickerbordercolor+';background-color:'+textbgcolor+';cursor:hand" onClick="openlink()">') document.write('<v:shapetype id="shapeid" coordsize="600,320" path="'+path[i_shape]+'">') document.write('<v:path textpathok="t"/>') document.write('<v:textpath on="t" fitshape="t" xscale="t"/>') document.write('</v:shapetype>') document.write('<v:shape type="#shapeid" style="position:absolute; top:3px; left:'+posleft+'px; width:'+innerwidth+'px;height:'+innerheight+'px;" strokeweight="1pt">') if (applygradient) { document.write('<v:fill id="fillid" method="linear sigma" type="gradient" color="'+textfontcolor[i_textfontcolor]+'" opacity="'+fontopacity+'"/>') } else { document.write('<v:fill id="fillid" color="'+textfontcolor[i_textfontcolor]+'" opacity="'+fontopacity+'"/>') } document.write('<v:stroke id="strokeid" weight="'+widthfontoutline+'pt" color="'+outlinecolor[i_outlinecolor]+'"/>') document.write('<v:shadow on="t" id="shadowid" opacity="'+shadowopacity+'" color="'+shadowcolor[i_shadowcolor]+'"/>') document.write('<v:textpath id="textpathid" style="font-family:\''+textfont+'\';v-text-kern:t" trim="t" fitpath="t" xscale="f" string="Hello World"/>') document.write('</v:shape>') document.write('</div>') } if (ns6 || opera) { if (ns6) { textwidth-=2*funtickerborder textheight-=2*funtickerborder } document.write('<div ID="roof" style="position:relative;width:'+textwidth+'px;height:'+textheight+'px;border-style:solid;border-width:'+funtickerborder+'px;border-color:'+funtickerbordercolor+';background-color:'+textbgcolor+'">') document.write('<span ID="ticker" style="position:absolute;top:0px;left:0px;width:'+innerwidth+'px;height:'+innerheight+'px;"></span>') document.write('</div>') } if (ie5) {window.onload=changeform} if (opera) {window.onload=showticker} if (ns6) {window.onload=showtickerNS6} </script> </td></tr></table>

All'interno dello script le variabili sono davvero molte, tutte quante sono commentate in lingua inglese ma sono facilmente intuibili per chi avesse un minimo di conoscenza con html.

Una raccomandazione da sottolineare riguarda le dimensioni della tabella che deve riprodurre l'effetto, non basta cambiare le sue dimensioni agendo sui parametri del tag <table>, le stesse identiche misure espresse in pixel devono essere riportate anche nelle variabili:

var textwidth=400 per la larghezza
var textheight=200 per l'altezza

Se avete dato uno sguardo al listato avrete anche notato quanti siano i parametri che vi permettono delle personalizzazioni, non vi resta che provarli tutti e... buon divertimento.