![]() |
![]() |
Effetti speciali sul testoHtml dinamico consente di arricchire il testo dei documenti Web con particolari effetti visivi, senza che questi incidano sui tempi di caricamento delle pagine e nel pieno rispetto della compatibilità con i due browser più diffusiOttenere effetti grafici accattivanti senza caricare eccessivamente le pagine rientra nell’elenco degli elementi che i Web designer devono rispettare quando creano pagine per un sito. Benché non ci siano regole precise per definire il raggiungimento di tale equilibrio, esistono accorgimenti e consigli per aumentare le probabilità che ciò accada. Come quello di ottimizzare il più possibile le immagini Gif o Jpg, limitandone il peso in Kb senza che la qualità scada troppo, oppure, di creare titoli e intestazioni di pagina in testo Html piuttosto che attraverso immagini. Quest’ultimo aspetto è proprio uno dei casi in cui Dhtml viene in soccorso degli sviluppatori, consentendo, per esempio, di muovere il testo nelle direzioni desiderate (evitando l’uso di Gif animate) o sfumare i colori. MARQUEE, un passo prima di DhtmlNon possiamo non partire da MARQUEE, il tag Html che permette il movimento di semplice testo all’interno di un documento Web. Per la cronaca, questo marcatore è presente dalla versione 2.0 di MSIE e non è mai stato integrato in Netscape. Il suo funzionamento è molto semplice e non contempla l’uso di codice JavaScript o Dhtml. Ecco qualche esempio: <MARQUEE BEHAVIOR=SCROLL>INTERNET NEWS</MARQUEE>Testo in movimento da destra verso sinistra senza soluzione di continuità. <MARQUEE BEHAVIOR=SLIDE>INTERNET NEWS</MARQUEE>Testo in movimento da destra con blocco nella parte sinistra. <MARQUEE BEHAVIOR=ALTERNATE>INTERNET NEWS</MARQUEE>Testo in movimento continuo da destra a sinistra e viceversa. <MARQUEE BGCOLOR=red>INTERNET NEWS</MARQUEE>Stabilisce il colore di sfondo. <MARQUEE DIRECTION=RIGHT>INTERNET NEWS</MARQUEE>Definisce la direzione del movimento, in questo caso da destra verso sinistra. <MARQUEE HEIGHT=20 WIDTH=300>INTERNET NEWS</MARQUEE>Altezza (height) e larghezza (width) in pixel. <MARQUEE HSPACE=10 VSPACE=10>INTERNET NEWS</MARQUEE>Distanza, in pixel, dai margini laterali (HSPACE) e superiori (VSPACE). <MARQUEE LOOP=5>INTERNET NEWS </MARQUEE>Numero di passaggi del testo. Il parametro può essere impostato su INFINITE. <MARQUEE SCROLLDELAY=5 SCROLLAMOUNT=2>INTERNET NEWS</MARQUEE>Velocità, in millisecondi, della visualizzazione dei messaggi. Nella versione 4 di MSIE l’elemento MARQUEE è stato arricchito con l’aggiunta di un modello di oggetti capace di riprodurre qualsiasi codice Html. Per esempio, è possibile alternare lo scorrimento in alto e in basso, oltre a contenere controlli che rispondono al mouse o ai segnali della tastiera. Tutto questo avviene grazie a tre eventi standard: onstart, onbounce, onfinish. Un esempio pratico di questo nuovo approccio di MSIE 4 all’elemento MARQUEE è esposto nel seguente esempio:
<MARQUEE TITLE="Premi il tasto del mouse per interrompere lo scroller" ONMOUSEDOWN="this.stop();" ONMOUSEUP="this.start();"><INPUT TYPE=BUTTON VAlUE="clicca qui" ONCLICK="alert('hai cliccato');"></MARQUEE>
Come abbiamo sottolineato in precedenza, il tag MARQUEE non è riconosciuto da Netscape con cui non è in grado di generare alcun effetto dinamico. Per estendere l’effetto del movimento di testo, sia orizzontale sia verticale, anche a questo browser, occorre appoggiarsi a Dynamic Html. Compatibilità grazie a Html dinamicoIl file «esempio01.htm» si riferisce ad un effetto «marquee crossbrowser» con testo in movimento da destra verso sinistra. Il codice necessario al suo funzionamento va inserito nel corpo del documento, tra i tag <BODY>. In parte può essere modificato secondo le proprie esigenze e in parte va lasciato inalterato.
var marqueewidth=350Stabilisce la larghezza (width) in pixel della porzione di documento deputata ad ospitare l’effetto marquee. var marqueeheight=20Questo valore si riferisce all’altezza (height), in pixel, della porzione di pagina che ospita l’effetto. È valido solo per Netscape, mentre Internet Explorer lo ignora. var speed=6Questo valore si riferisce alla velocità di scorrimento del testo. A valori più alti corrisponde una maggiore velocità. var marqueecontents='<B><font face="Arial"><a href="http://inews.tecnet.it">INTERNET NEWS</a> la prima e più diffusa rivista del settore</font></B>'Questo codice identifica il contenuto del messaggio in movimento. Non è difficile riconoscere da questo esempio che il testo viene formattato secondo le regole classiche di Html, con la possibilità di inserire link a risorse esterne. L’unico accorgimento da tenere in considerazione è quello di non inserire apici singoli, che altrimenti confonderebbero il codice. Testo, ma anche immaginiNel file «esempio02.htm» al testo visto in precedenza viene aggiunta un’immagine in formato Gif: var marqueecontents='<IMG SRC="staticlogo.gif" WIDTH=150 HEIGHT=54 BORDER=0 align=middle hspace=10><B><a href="http://inews.tecnet.it"></a><font face="Arial"> la prima e più diffusa rivista del settore</font></B>'Lo stesso effetto di scorrimento può essere ottenuto in direzione verticale dal basso verso l’alto, con un codice del tutto simile al precedente, sostituendo il valore height al valore width. Il file «esempio.03» mostra un esempio di scorrimento verticale di testo e immagini. Come nella dimostrazione a cui abbiamo fatto riferimento poco sopra l’unica parte da modificare è quella che apre il codice script dell’esempio: var marqueewidth=200var marqueeheight=120var speed=2var marqueecontents='<CENTER><IMG SRC="staticlogo.gif" WIDTH=150 HEIGHT=54 BORDER=0 align=middle hspace=10><BR><B><a href="http://inews.tecnet.it"></a><font face="Arial"> la prima e più diffusa rivista del settore</font></B></CENTER>'
Un effetto simile all’ultimo esempio di scroller verticale può essere implementato con un ulteriore effetto grafico che ne rende ancora più interessante l’impatto visivo. Si tratta di un effetto fade, cioè di sfumatura del testo, che scompare progressivamente, confondendosi con il colore di sfondo. Il file «esempio04.htm» ha un codice più complesso di quelli visiti in precedenza, ma solo un piccola porzione di esso va modificata: L’effetto grafico in cui le varie porzioni di testo si susseguono scomparendo in dissolvenza var bgcolor="#FFFFFF";Definisce il colore che fa sfondo al testo visualizzato. var color="#0000FF";Stabilisce il colore del testo in movimento dal basso verso l’alto. I messaggi da visualizzare vanno numerati progressivamente e definiti in questa forma: message[0]='INTERNET NEWS'message[1]='la prima'message[2]='e più diffusamessage[3]='rivista del settore'message[4]='http://inews.tecnet.it'
Anche in questo caso non vanno inseriti apici singoli, altrimenti la demo non produce i suoi effetti. Per aggiungere ulteriori messaggi oltre a quelli già presenti, è sufficiente aggiungere altre righe di codice con numerazione progressiva: message[5]='nuovo messaggio'message[6]='nuovo messaggio'message[7]='nuovo messaggio'La formattazione del testo dei messaggi è differente per Netscape e MSIE, in conseguenza delle note divergenze in ordine all’accesso al DOM (Document Object Model) di Dynamic HTML. Per Netscape è necessario impostare il seguente codice: document.layers['textanim'].document.writeln('<P Class="main" Align="Center"><font color="'+rgb+'" size=4 face=arial>'+message[msg]+'</font>')Mentre per Internet Explorer si deve considerare la riga di codice textanim.innerHTML='<P Class="main" Align="Center"><font color="'+rgb+'" size=4 face=arial>'+message[msg]+'</font>'In entrambi i casi la formattazione fa riferimento al foglio di stile: <style type="text/css">P.main {font-family : arial;font-size : 16pt;font-weight : bold;}</style>
La proprietà innerHTML definisce i contenuti di un elemento usando marcature. Questa proprietà, come anche innerText, outerHTML e outerTEXT, è parte del meccanismo di HTML dinamico chiamato «sostituzione HTML». In altre parole questo tipo di approccio si rivolge ad elementi HTML già esistenti, i quali vengono considerati come oggetti che si possono cambiare dinamicamente con script associati alla pagina. window.setTimeout('start()',1000);Definisce il tempo, espresso in millisecondi, che separa una riga di messaggio da quella successiva. window.setTimeout('start()',2000);Stabilisce il tempo, espresso in millisecondi, che separa le successive visualizzazioni dell’intero messaggio. A differenza del precedente, che separava le singole righe del messaggio, questo valore si riferisce all’intero contenuto dello stesso. Impostato il codice all’interno del tag <HEAD> è necessario agire sul corpo del documento, inserendo il codice che richiama separatamente quanto impostato per MSIE e per Netscape: <Div id="textanim" style="position: absolute; left: 150;
top: 200">
</Div>
Questo codice viene riconosciuto dal browser Microsoft e stabilisce la posizione assoluta dell’effetto all’interno della pagina. <Layer name="textanim" left=150 top=200></Layer>Questo codice richiama, invece, quanto necessario al funzionamento della demo con Netscape. Perché lo script funzioni correttamente deve inserirsi nel tag <BODY> il gestore di eventi onLoad che richiama la funzione start(): <BODY BACKGROUND="sfondo.jpg" vlink="blue" onLoad="start()">
Anche in questo esempio è possibile alternare testo a immagini in formato Gif o Jpg, agendo sul codice che imposta i messaggi: message[0]='INTERNET NEWS'
message[1]='la prima'
message[2]='e più
diffusa'
message[3]='rivista
del settore'
message[4]=''<IMG SRC="staticlogo.gif" WIDTH=150 HEIGHT=54 BORDER=0> |
Internet News è un mensile della Casa Editrice Tecniche Nuove S.p.A.
© 1995/99. Tutti i diritti sono riservati.
Internet News non risponde di eventuali errori e omissioni.
Commenti a: inews@tecnet.it