Slide men¨ in Html dinamico

Dynamic Html
di Risorse.net

CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript

Avere dei menu che racchiudano testi e immagini in modo tale da farli apparire solo a richiesta dal visitatore, Ŕ una delle possibilitÓ intrinseche di Dynamic Html.
Proprio in questo articolo, prenderemo in considerazione uno di questi script cercando di approfondire e personalizzare il pi¨ possibile il codice sorgente, tenendo sempre presente la demo reperibile cliccando qui (script Slide men¨).

Ma apprestiamoci ad aprire il file con un editor di testo qualunque (va bene anche Notepad per Windows 9x), superati i primi tag di apertura, ci si imbatte in un foglio di stile, che a prima vista, sembra incoprensibile:

A {color:#000000; font-family:'Arial'; font-size:10pt; line-height:20pt;}
STRONG {font-family:'Arial'; font-size:15pt; font-weight:bold; line-height:25pt;}
P {font-family:'Arial'; font-size:10pt; line-height:13pt;}

Queste prime tre righe di istruzioni, servono per specificare alcuni parametri da utilizzare nei collegamenti ipertestuali e nel testo contenuto all'interno del documento (non sono strettamente necessarie - si possono anche eliminare).

#pulloutInterface {position:absolute; left:50; top:50; width:400; height:250; clip:rect(0,400,250,0); background-color:#000000; layer-background-color:#000000; visibility:visible;}
#pulloutSidebar1 {position:absolute; left:5; top:5; width:100; height:30; clip:rect(0,100,30,0); background-color:#DEDEDE; layer-background-color:#DEDEDE;}
#pulloutSidebar2 {position:absolute; left:5; top:40; width:100; height:30; clip:rect(0,100,30,0); background-color:#C5C5C5; layer-background-color:#C5C5C5;}
#pulloutSidebar3 {position:absolute; left:5; top:75; width:100; height:30; clip:rect(0,100,30,0); background-color:#A2A2A2; layer-background-color:#A2A2A2;}
#pulloutSidebar4 {position:absolute; left:5; top:110; width:100; height:30; clip:rect(0,100,30,0); background-color:#7E7E7E; layer-background-color:#7E7E7E;}

Queste righe invece, acquistano una maggiore importanza perchÚ serve per indicare gli attributi dei tasti che si trovano a sinistra (nel nostro esempio) della pagina. È qui che bisogna intervenire se si volesse modificare in qualche modo i bottoni che fanno apparire i vari layers.

#pulloutContent {position:absolute; left:110; top:5; width:285; height:240; clip:rect(0,285,240,0); background-color:#000000; layer-background-color:#000000;}
#pulloutContent1 {position:absolute; left:0; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#DEDEDE; layer-background-color:#DEDEDE; visibility:visible;}
#pulloutContent2 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#C5C5C5; layer-background-color:#C5C5C5; visibility:hidden;}
#pulloutContent3 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#A2A2A2; layer-background-color:#A2A2A2; visibility:hidden;}
#pulloutContent4 {position:absolute; left:-285; top:0; width:285; height:240; clip:rect(0,285,240,0); background-color:#7E7E7E; layer-background-color:#7E7E7E; visibility:hidden;}

Infine, il terzo blocco dello style, serve per modificare i riquadri che appaiono cliccando sui vari links. Possono essere facilmente sostituite le dimensioni (si faccia riferimento agli attributi width: larghezza, height: altezza e le coordiante racchiuse tra le parentesi), la posizione (si guardi left: distanza in pixel da sinistra e right: distanza in pixel da destra) e il colore di sfondo.

Continuando con l'analisi del documento, immediatamente sotto il foglio di stile appena analizzato, si trova il Javascript necessario all'animazione dei layers, che non bisogna modificare.

Si arriva cosý al <BODY>; in questa parte, non si farÓ altro che richimare le funzioni appena descritte nell'<HEAD>. Ma vediamo di presentarle:

<DIV ID="pulloutInterface">

<DIV ID="pulloutSidebar1"><P ALIGN=CENTER><A HREF="javascript:pullout(pullout1)">Primo gruppo</A></P></DIV>
<DIV ID="pulloutSidebar2"><P ALIGN=CENTER><A HREF="javascript:pullout(pullout2)">Secondo gruppo</A></P></DIV>
<DIV ID="pulloutSidebar3"><P ALIGN=CENTER><A HREF="javascript:pullout(pullout3)">Terzo gruppo</A></P></DIV>
<DIV ID="pulloutSidebar4"><P ALIGN=CENTER><A HREF="javascript:pullout(pullout4)">Quarto gruppo</A></P></DIV>


Come si pu˛ facilmente intuire, queste righe di codice contengono i links al Javascript. In questa parte possono solo essere modificati i nomi dei links (ad esempio, cambiate 'Primo gruppo' in ci˛ che meglio si addice al vostro sito).

Adesso, l'ultimo blocco di istruzioni personalizzabile, riguarda il conteuto dei vari layer:

<DIV ID="pulloutContent">

<DIV ID="pulloutContent1">
<P ALIGN="CENTER"><STRONG>Primo gruppo</STRONG>
<TABLE BORDER=0 WIDTH=275><TD>
<P>Qui va inserito il testo che vuole richiamare dal menu di sinistra (primo gruppo).<BR><BR>
<a href="http://www.ipoint2000.net/galileo"><IMG SRC="galileo_piccolo.gif" WIDTH=87 HEIGHT=21 align=center hspace=5 border=0></a>
</TD></TABLE>
</P>
</DIV>


<DIV ID="pulloutContent2">
<P ALIGN="CENTER"><STRONG>Secondo gruppo</STRONG>
<TABLE BORDER=0 WIDTH=275><TD>
<P>Qui va inserito il testo che vuole richiamare dal menu di sinistra (secondo gruppo). All'interno del codice puoi trovare dei commenti che aiutano a capire come personalizzare lo script!
</TD></TABLE>
</P>
</DIV>



<DIV ID="pulloutContent3">
<P ALIGN="CENTER"><STRONG>Terzo gruppo</STRONG>
<TABLE BORDER=0 WIDTH=275><TD>
<P>Qui va inserito il testo che vuole richiamare dal menu di sinistra (Terzo gruppo). Visita Galileo! Magazine 100% pure DHTML!</TD></TABLE>
</P>
</DIV>


<DIV ID="pulloutContent4">
<P ALIGN="CENTER"><STRONG>Quarto gruppo</STRONG>
<TABLE BORDER=0 WIDTH=275><TD>
<P>Qui va inserito il testo che vuole richiamare dal menu di sinistra (quarto gruppo).</TD></TABLE>
</P>
</DIV>

</DIV>


Questa parte del codice Ŕ estremamente importante, visto che, come si accennava prima, riguarda il contenuto dei vari layers. È possibile personalizzare queste parti, inserendo ci˛ che ritenete pi¨ appropriato, tendendo sempre presente la grandezza del layer (che potete modificare guardando il foglio di stile, spiegato all'inizio di questo articolo).

Clicca qui per vedere l'esempio finale.

© Risorse.net (www.risorse.net)
pagina in versione stampabile:
http://www.risorse.net /dhtml/teoria/primo.asp?print=ok