|
Effetti dinamici su cursori e alternate text
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.
|