Livello di difficoltà: |
|
Dynamic Html è una tecnologia approvata dal W3C per la creazione di siti Web dinamici ed interazioni client side con l'utente. In questa sezione sono disponibili centinaia di esempi ed arretrati della mailing list "Una demo Dhtml a settimana".
|
| |
Effetto sul puntatore del mouse
Arretrati lista "Una demo Dhtml a settimana"
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript
COMPATIBILITÀ: MsIe, Netscape
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo
Dynamic Html offre la possibilita' di rendere dinamici oggetti altrimenti
stabili o comunque poco appariscenti, come ad esempio il puntatore del
mouse.
Un'immagine che segue il cursore in qualsiasi punto all'interno del
documento, potrebbe essere una soluzione da applausi.
Vediamo quindi di analizzare la demo:
<script language="JavaScript">
<!--
function YY_Mousetrace(evnt) { //v1.2 copyright (c)1998 Yaro von Flocken
if (yyns4)
{if (evnt.pageX) {yy_ml=evnt.pageX; yy_mt=evnt.pageY;} }
else{
yy_ml=(event.clientX + document.body.scrollLeft);
yy_mt=(event.clientY + document.body.scrollTop);
}
if (yy_tracescript)eval(yy_tracescript)
}
//-->
</script>
Questa prima parte di codice, imposta le coordinate orizzontali (clientX) e
verticali (clientY) del cursore. Finito l'<head>, passiamo ad analizzare il
<body>; che inizia con:
<body
onLoad="YY_Mousetrace('',',document.YY_Mousetrace1');YY_Layerfx(8,18,'yy_ml'
,'yy_mt','document.layers[\'segui\']',50000,false,0,0,10);">
L'evento onload, ha il compito di dare il via all'animazione al caricamento
della pagina. I valori 8 e 18, impostano la distanza in pixel dal cursore.
Tale misura, viene presa a partire dal punto piu' alto a sinistra (la stessa
cosa che si fa per i layers). Se i numeri fossero stati negativi, allora
l'immagine sarebbe stata posta verso l'alto rispetto al puntatore. Inoltre,
la riga:
'document.layers[\'segui\']'
stabilisce quale layer dovra' seguire il mouse. I contenuti di tale layer,
verranno definiti piu' avanti.
Nel proseguire il commento del tag <body>, si trova il valore 50000, che
attribuisce per quanto tempo il layer dovra' seguire il cursore.
I valori finali di questa parte di codice:
false,0,0,10
Impostano la fluidita' con la quale il layer seguira' il puntatore. In
pratica, piu' i numeri saranno alti, meno l'animazione sara' continua (in
conclusione si avranno meno fotogrammi).
Analizzato tutto cio', vediamo di definire i contenuti del layer di nome
"segui":
<div id="segui" style="position:absolute; width:20px; height:13px;
z-index:40; left: 311px; top: 139px"><img src="galileo_piccolo.gif"></div>
In questa porzione di sorgente, si determinano alcuni valori importanti:
posintion: posizione dell'oggetto rispetto agli altri all'interno del
documento.
width: larghezza del layer.
height: altezza.
z-index: e' l'indice che serve nel caso ci sia un accavallamento di
oggetti (uno sopra l'altro). Se ci fosse, l'oggetto con l'indice-z piu' alto
apparira' sopra. Nel caso della nostra demo, se si volesse dare l'effetto di
una gif che passi sotto una scritta, si attribuisca uno z-index piu' basso
della scritta.
left: distanza in pixel dal margine sinistro del documento.
top: distanza in pixel rispetto al margine superiore.
Arrivati fin qui, manca l'ultimo Javascript:
<script language="JavaScript">
<!--
function
YY_Layerfx(yyleft,yytop,yyfnx,yyfny,yydiv,yybilder,yyloop,yyto,yycnt,yystep)
{ //v1.2
//copyright (c)1998 Yaromat, Jaro von Flocken
if ((document.layers)||(document.all)){
eval("myfunc=yyfnx.replace(/x/gi, yycnt)");
with (Math) {yynextx= eval(myfunc)}
eval("myfunc=yyfny.replace(/x/gi, yycnt)");
with (Math) {yynexty= eval(myfunc)}
yycnt=(yyloop && yycnt>=yystep*yybilder)?0:yycnt+yystep;
if (document.layers){
eval(yydiv+".top="+(yynexty+yytop))
eval(yydiv+".left="+(yynextx+yyleft))
}
Questa appena descritta, è l'animazione che dovrà comprendere Netscape Communicator.
if (document.all){
eval("yydiv=yydiv.replace(/.layers/gi, '.all')");
eval(yydiv+".style.pixelTop="+(yynexty+yytop));
eval(yydiv+".style.pixelLeft="+(yynextx+yyleft));
}
argStr='YY_Layerfx('+yyleft+','+yytop+',"'+yyfnx+'","'+yyfny+'","'+yydiv+'",
'+yybilder+','+yyloop+','+yyto+','+yycnt+','+yystep+')';
if (yycnt<=yystep*yybilder){eval(yydiv+".yyto=setTimeout(argStr,yyto)");}
}
}
// -->
</script>
Il medesimo effetto per Microsoft Internet Explorer.
|
