tecnica

Effetti dinamici su cursori e alternate text

Massimiliano Valente – mvalente@tecnet.it

Anche elementi comuni e stardardizzati, come il puntatore del mouse o il testo alternativo aggiunto alle immagini richiamate da Html, con Dynamic Html possono animarsi e offrire spunti grafici interessanti. Ve lo dimostriamo con alcuni semplici esempi


Tra le funzionalità che Html dinamico ha introdotto nella pubblicazione di documenti per il Web, quelle relative agli effetti grafici sono forse le meno utili, ma certamente le più suggestive. Grazie all'implementazione di codice dinamico è possibile animare documenti Html con effetti altrimenti ottenibili solo con specifici programmi e plug-in, quali Macromedia Shockwave e simili. Rispetto a questi ultimi Html dinamico ha il vantaggio di non richiedere plug-in specifici e di garantire un'estrema velocità di realizzazione degli effetti. Di seguito descriveremo come ottenere effetti speciali su «MouseTrace» e «Alternate Text», due elementi molto comuni nel Web publishing. Gli esempi pratici sono inclusi nel CD-ROM allegato alla rivista e rigorosamente cross-browser, cioè compatibili con Ms Internet Explorer 4/5 e Netscape 4.
MouseTrace
La nostra prima dimostrazione si riferisce alla possibilità di affiancare al classico puntatore del mouse un'altra immagine che ne segua i movimenti a una distanza stabilita, e che si blocchi solo quando il mouse esca dall'area di documento. Perché l'effetto risulti piacevole senza disturbare chi consulta il documento, è consigliabile ridurre al minimo le dimensioni dell'immagine, rendendola visibile, ma non ingombrante. Nel nostro esempio abbiamo utilizzato un'immagine di 75x25 pixel in formato gif con colore di sfondo trasparente. Per facilitare la comprensione dell'esempio e rendere il più ordinato possibile il codice, ne abbiamo raggruppato una parte all'interno di un file esterno con estensione js. Questa soluzione ha oltretutto il vantaggio di condividere lo stesso effetto per più documenti grazie a un semplice richiamo al file esterno.
Il file «mouse.js» stabilisce diverse funzioni relative alle coordinate X Y di posizionamento del mouse.
In particolare il codice:


yy_ml=(event.clientX + document.body.scrollLeft);
yy_mt=(event.clientY + document.body.scrollTop);


fa riferimento alle coordinate orizzontali (clientX) e verticali (clientY) del puntatore del mouse relative all'area client della finestra. Altre proprietà dell'oggetto «event» relative agli eventi del mouse sono «OffsetX» e «OffsetY», «screenX» e «screenY». Le prime si riferiscono alle coordinate del mouse nel contesto di rendering, mentre le seconde a quelle relative allo schermo. Per il corretto funzionamento della demo il file esterno «mouse.js» non va modificato in nessuna parte.
Il file «esempio01.htm» è il documento all'interno del quale si producono gli effetti di questo esempio. Innanzitutto, è necessario richiamare il codice contenuto nel file esterno «mouse.js» precedentemente creato, attraverso l'inserimento all'interno dei tag <HEAD> della riga:

<script src="mouse.js"></script>


Fatto questo, proseguiamo aggiungendo alla marcatura <BODY> il codice che richiama, all'atto dell'apertura della pagina, le funzioni impostate in precedenza:

<BODY BACKGROUND="sfondo.jpg" vlink="blue" onLoad="YY_Mousetrace('',',document.YY_Mousetrace1');YY_Layerfx(5,15,'yy_ml','yy_mt','document.layers[\'segui\']',50000,false,0,0,10)">


Onload è un evento che si verifica dopo il caricamento della parte di pagina posta tra <BODY>, ma prima che questa sia visualizzata. Tale peculiarità ne rende possibile l'uso in casi come il nostro, dove è necessario inizializzare l'operazione prima ancora che la pagina venga visualizzata.

I valori 5, 15 si riferiscono alla distanza in pixel dell'immagine dal puntatore del mouse. In altre parole l'immagine «inews.gif» seguirà il mouse a una distanza verso destra di 5 pixel, e verso il basso di 15. È possibile impostare valori preceduti da segno negativo, per fare in modo che l'immagine sia visualizzata in alto o a destra:

<BODY BACKGROUND="sfondo.jpg" vlink="blue" onLoad="YY_Mousetrace('',',document.YY_Mousetrace1');YY_Layerfx(-50,-30,'yy_ml','yy_mt','document.layers[\'segui\']',50000,false,0,0,10)">


In questo secondo esempio l'immagine è stata posta a una distanza di 50 pixel verso sinistra e 30 verso l'alto.
All'interno dei tag <BODY> vanno inseriti due blocchi di codice:

<script language="JavaScript">
<!--
var yyns4=window.Event?true:false; var yy_mt = 0; var yy_ml = 0;
if (yyns4) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = YY_Mousetrace;
yy_tracescript = '';
//-->
</script>


Questo codice non va modificato in nessuna parte. Mentre le tre righe che seguono si possono modificare per adattarle alle proprie esigenze:


<div id="segui" style="position:absolute; width:70px; height:25px">
<img src="inews.gif" width="70" height="25">
</div>


«inews.gif» è il nome dell'immagine che segue il puntatore del mouse, la quale, come descritto in precedenza, ha dimensioni di 70x25 pixel. Per sostituire un'altra immagine è sufficiente modificare nome del file e dimensioni.
La marcatura <DIV> può essere indifferentemente sostituita con <SPAN>. Solitamente l'uso della prima è consigliabile per blocchi di testo ampi, la seconda per quelli più corti. In Html dinamico l'oggetto event è una proprietà dell'oggetto window, e consente di accedere alle informazioni correlate agli eventi, in modo tale da decidere se questi debbano essere trasmessi gerarchicamente o utilizzare le azioni predefinite. In altre parole l'oggetto event consente di avere un maggior numero d'informazioni sull'evento e sul documento nel momento in cui questo si verifica. Tra le funzionalità più utili dell'oggetto event c'è la possibilità d'intercettare gli eventi prima che un'altra funzione possa riceverli.
Alternate Text
Per «testo alternativo» si intende il commento aggiunto alle immagini inserite in un documento Html, visualizzato quando il mouse vi passa sopra. Le specifiche di Html 4.0 impongono che tale commento sia incluso in ogni immagine, allo scopo di facilitare la navigazione ai browser testuali. Di default, il testo alternativo è visualizzato con carattere nero su sfondo giallo. Html dinamico consente di renderlo scorrevole e di personalizzare vari elementi: tipo di carattere, colore, sfondo e dimensioni. Questo genere di effetto si produce su link testuali o d'immagine. In altre parole permette di inserire un commento scorrevole a uno o più link e non soltanto a immagini; cosa che Html classico non permette di fare.
Come nel precedente esempio, anche in questo caso abbiamo creato un file esterno di nome «alt.js» contenente la parte più corposa del codice della demo.
Il file «alt.js» imposta le funzioni «showtip2», «hidetip2» e «scrolltip» in modo differente per MSIE e Netscape.


if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>'
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
document.all.tooltip2.style.visibility="visible"
}

Questo codice si riferisce al funzionamento della demo con Internet Explorer. La proprietà «innerHtml» definisce il contenuto di un elemento usando le normali marcature Html. Nel nostro esempio, infatti, a «innerHtml» segue il codice:

<marquee style="border:1px solid black">'+text+'</marquee>

che definisce il movimento del testo da destra verso sinistra grazie a Marquee (tag proprietario di MSIE), e che lo stesso deve essere di colore nero all'interno di una finestra con bordo pari a 1 pixel.
«ScrollLeft+10» stabilisce che la finestra contenente il commento viene visualizzata a una distanza di 10 pixel alla destra del puntatore del mouse.
«ScrollTop+10» indica, invece, la distanza in pixel verso il basso della finestra di messaggio. In entrambi i casi, se al segno positivo viene sostituito quello negativo, la distanza si intende rispettivamente verso sinistra nel primo caso e verso l'alto nel secondo.
Esempio03.tif
La funzione «ShowTip2» così impostata funziona solo con MsIE, mentre non produce alcun effetto con Netscape. Perché questo avvenga è necessario fare riferimento al codice successivo:

else if (document.layers){
document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"
}


Anche in questo caso vale quanto detto in precedenza per i valori:

document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10

che si riferiscono alla distanza in pixel dal puntatore del mouse verso destra (pageX+10) e verso il basso (pageY+10). Impostato il contenuto del file esterno «alt.js», dobbiamo agire sul documento sul quale intendiamo produrre l'effetto dinamico. All'interno dei marcatori <HEAD> va inserito il riferimento al file esterno:

<script src="alt.js"></script>

Il codice successivo va inserito in due fasi all'interno del documento, nello spazio compreso tra i marcatori <BODY>:

<div id="tooltip2" style="position:absolute; visibility:hidden; clip:rect(0 150 50 0); width:150px; background-color:red; font-size:14px; font-family:arial; font-weight:bold; color:white">
<layer name="nstip" width=1000px bgColor="red"></layer>
</div>

«clip:rect (0 150 50 0)» stabilisce le dimensioni in pixel della finestra all'interno della quale scorre il testo di questo esempio. «background-color:red» il colore di sfondo della finestra, ma solo per MSIE. Il resto riguarda la grandezza, il tipo e il colore (solo per MSIE) del carattere. Il colore di sfondo della finestra per Netscape viene impostato dal codice:

<layer name="nstip" width=1000px bgColor="red"></layer>

Per ultimo inseriamo all'interno del link l'evento onMouseover che, quando il puntatore del mouse passa sull'area di link, avvia la funzione «showtip2», e l'evento onMouseout che quando lo stesso ne esce avvia la funzione «hidetip2»:

<A HREF="http://inews.tecnet.it" onMouseover="showtip2(this,event,'La prima e più autorevole rivista del settore')" onMouseout="hidetip2()">http://inews.tecnet.it</A>

Gli effetti che in questa demo si producono su un solo link, possono esserlo indifferentemente su tutti quelli presenti nel documento. L'uso del file esterno, se richiamato in modo opportuno, consente di utilizzare l'effetto in tutto il sito senza essere obbligati a ripeterne la sintassi volta per volta.


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