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
Comunicati stampa
Proposte di viaggio
Prenotazione hotel
Prenota vacanze
Accessori palmari
Cerca alberghi
Guide turistiche

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".
 

Men¨ a comparsa dall'alto

Arretrati lista "Una demo Dhtml a settimana"
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript

COMPATIBILITÀ: Ms Ie, Netscape, Opera
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo

All'interno di questa mailing list abbiamo ripetuto pi¨ volte l'importanza della distribuzione delle informazioni in un sito Web. Esse devono essere facilmente raggiungibili e da sempre vige la regola dei tre clicks: qualsiasi articolo, guida o approfondimento deve essere raggiungibile da qualsiasi utente in meno di tre clicks del mouse partendo naturalmente dalla Home page.
I men¨ realizzati in Dynamic Html sono in questo senso una soluzione vantaggiosa e anche se non facilmente realizzabili, velocemente personalizzabili grazie agli scripts che vengono messi a disposizione in questa lista e nell'archivio di Risorse.net (www.risorse.net/dhtml). Fatta questa doverosa introduzione, analizziamo la sintassi per creare l'esempio:

<SCRIPT LANGUAGE="JavaScript">
function setVariables(){
y=-50;x=9;ob=1;max=20 // la var x=indica il n. di bottoni
if (navigator.appName == "Netscape") v=".top=",dS="document.",sD="";
else v=".pixelTop=",dS="",sD=".style";
}
function scrollOn(){
if (ob<10){ // la var "x" +1 da l'ob
objectX="object"+ob;y+=10;eval(dS + objectX + sD + v + y);
if (y else y=-50, max+=40, ob+=1, setTimeout("scrollOn()",20)
}
}
</SCRIPT>

In questo Javascript vengono stabilito, tra le altre cose, il numero di bottoni che comporranno il men¨. Le riche da prendere in considerazione sono:

y=-50;x=9;ob=1;max=20

in cui la variabile x indica proprio il numero di pulsanti e:

if (ob<10)

Essendoci nove tasti, la variabile x sarÓ uguale a 9 e la variabile ob avrÓ come valore 10.

Al fine del corretto funzionamento della demo, il tag <body> dovrÓ contenere i richiami alle funzioni appena create all'interno dello script:

<BODY onload="setVariables(),scrollOn()">

Il codice strettamente necessario alla creazione dei pulsanti Ŕ contenuto in fogli di stile (qui trovi una guida di riferimento www.risorse.net/css) che conterranno come valore dell'attributo id delle stringhe alfanumeriche ordinate in maniera crescente (object1, object2, object3 ecc.):

<font size="3"face="Arial">
<div id="object1" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
<table border=0 width=150 bgcolor=004080><td><CENTER><B><a href="http://www.risorse.net" style=text-decoration:none>Risorse.net</a></B></CENTER></td></table></div>
<div id="object2" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
<table border=0 width=150 bgcolor=004080><td><CENTER><B><a href="http://www.risorse.net/dhtml" style=text-decoration:none>Sezione Dhtml</a></B></CENTER></td></table></div>
<div id="object3" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
<table border=0 width=150 bgcolor=004080><td><CENTER><B><a href="http://www.risorse.net/mailing" style=text-decoration:none>Mailing list</a></B></CENTER></td></table></div>
<div id="object4" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
<table border=0 width=150 bgcolor=004080><td><CENTER><B><a href="http://www.risorse.net/server-free" style=text-decoration:none>Spazio free</a></B></CENTER></td></table></div>
<div id="object5" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
<table border=0 width=150 bgcolor=004080><td><CENTER><B><a href="http://www.risorse.net/flash" style=text-decoration:none>Guida a Flash</a></B></CENTER></td></table></div>
<div id="object6" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
<table border=0 width=150 bgcolor=004080><td><CENTER><B><a href="http://www.risorse.net/perl" style=text-decoration:none>Guida a Perl</a></B></CENTER></td></table></div>
<div id="object7" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
<table border=0 width=150 bgcolor=004080><td><CENTER><B><a href="http://www.risorse.net/libri" style=text-decoration:none>Recensione Libri</a></B></CENTER></td></table></div>
<div id="object8" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
<table border=0 width=150 bgcolor=004080><td><CENTER><B><a href="http://www.risorse.net/software" style=text-decoration:none>Il software</a></B></CENTER></td></table></div>
<div id="object9" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
<table border=0 width=150 bgcolor=004080><td><CENTER><B><a href="http://www.risorse.net/software" style=text-decoration:none>Hosting</a></B></CENTER></td></table>
</div>
</font>

Se volessimo aggiungere un nuovo tasto, oltre a ritoccare le variabili x e ob che abbiamo visto all'inizio, dovremo aggiungere il codice:

<div id="object10" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
<table border=0 width=150 bgcolor=004080><td><CENTER><B><a href="http://www.risorse.net/redazione" style=text-decoration:none>Redazione</a></B></CENTER></td></table></div>
 

 
 
Home > dhtml > teoria > 2000 > marzo > ...   © 1999-2017 Risorse.net, tutti i diritti riservati