Risorse per webmaster

L A   C O M U N I T À   V I R T U A L E   I T A L I A N A   P E R   W E B   M A S T E R S

 
 
      Tecnologie
      HTML
      CSS
      DHTML
      FLASH
      ASP
      PHP
      JSP
      PERL
      XML
      SMIL
      WIRELESS
      PALMARI
      APACHE
      MYSQL
      PICOSQL
 
      Grafica
 
      Servizi
 
      Raccolte
 
      Recensioni
 
      Analisi
 
      Disclaimer

   Per tutti
 
  .: Magazine
  .: Editor
  .: Appunti
  .: Gratis
  .: Scripts
  .: Components
 
   Home page

Partner
Magazine di tecnologie
Magazine di viaggio e turismo
Magazine di musica e spettacoli
Negozio di Informatica
Basilicata turismo
Food e territori
Agenzia di comunicazione turistica e Digital PR

versione stampabile Mostra una versione adatta per la stampa  

Livello di difficoltà:Livello di difficoltà: medio  
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.
  •  

     
     
    Home > dhtml > teoria > 1999 > luglio > ...   © 1999-2018 Risorse.net, tutti i diritti riservati