Scrollbar grafiche

Annoiate dalle solite scrollbar standard dei browser? Volete crearne una vostra, magari fatta con immagini elaborate da voi? Niente di più facile. Per fare questa cosa, il Javascript ci mette a disposizione il metodo window.scrollBy(o,v), dove per v si intende lo scorrimento verticale e per o quello orizzontale e le dimensioni sono in pixel. Questi si calcolano verso il basso per il verticale (quindi un incremento fa scorrere la pagina verso il basso, un decremento verso l'alto) e verso destra per quello orizzontale (incremento = verso destra, decremento=verso sinistra).
Il trucco consiste nel creare un frameset con la pagina principale a sinistra e un piccolo frame sulla destra che simula la scrollbar, con due pulsanti, uno per il basso e uno per l'alto (non ho tenuto conto dello scrolling orizzontale perché è abbastanza raro e non molto gradevole; comunque per implementarlo, basta aggiungere un'ulteriore frame sottile in basso dentro al frameset principale).
Questa volta prima vi faccio vedere il risultato e poi discutiamo il codiche che lo ha generato:
Clicca qui per aprire una finestra d'esempio

Adesso che avete visto l'esempio vediamo cosa bisogna scrivere per applicarlo: la prima cosa da dire è che abbiamo bisogno di creare un frameset (se non sapete come farlo guardate
"Webdesign->Come costruire la vostra prima pagina HTML->I frame" oppure cliccate qui), che ho chiamato scrl_gr_es.html.
I frame contenuti sono scrl_es_main.html (la pagina principale) e scrl_es_scrl.html per la scrollbar. Le due freccette non sono altro che delle immagini jpg.
Ecco di seguito tutto quello di cui c'è bisogno per eseguire questo script:

scrl_gr_es.html

<HTML>
<HEAD>
<TITLE>Esempio scrollbar grafiche</TITLE>
</HEAD>
<FRAMESET cols="*,30" FRAMEBORDER="0" FRAMESPACING="0" BORDER="0">
<FRAME name=uno src="scrl_es_main.html" target="_self" scrolling=no>
<FRAME name=due src="scrl_es_scrl.html">
<NOFRAMES>
<body>

</body>
</NOFRAMES>
</FRAMESET>
</HTML> Questo è il frameset che conterrà le due pagine. La prima, quella chiamata uno è quella dove appariranno le pagine , mentre la seconda (due) è la scrollbar.

scrl_es_main.html

<html>
<head>
<title>
Scrollbar grafiche - finestra principale
</title>
</head>
<body bgcolor="black" text="lime">
<font face="comic sans ms">
<h1 align="center">
Prova di scrollbar grafiche
</h1><br>
<h3>
Prova a cliccare nelle freccette a destra per vedere scorrere questa pagina. Per comodità è stata messa solo la scrollbar verticale (che tra l'altro è quella utile, mentre l'altra raramente si fa vedere).
<br><br>
Ora scrivo un po' di frasi per fare in modo che il documento sia lungo e si apprezzi il lavoro delle scrollbar.<br>
<br>
Le freccette sono messe in alto e in basso usando l'attributo <font color="gold">position:absolute;top=0</font> per la superiore e <font color="gold">position:absolute;bottom=0</font> per quella in basso.<br><br>
È stato facile applicare questo attributo perché le immagini con le frecce sono contenute onguna dentro ad un tag <font color="gold"><div></font><br><br>
</body>
</html> Questa è la pagina principale, dove verranno visualizzati i documenti. Adesso è una normale pagina che ho fatto io, ma può essere anche una qualsiasi pagina web.

scrl_es_scrl.html

<html>
<head>
<title>
Scrollbar grafiche - finestra con le scrollbars
</title>
</head>
<body bgcolor="black" text="lime">
<div id="su" style="position:absolute;top:0" onclick="parent.frames[0].window.scrollBy(0,-20);" onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor='default'">
<img src="fr_su.jpg">
</div>
<div id="giu" style="position:absolute;bottom:0" onclick="parent.frames[0].window.scrollBy(0,20);" onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor='default'">
<img src="fr_giu.jpg">
</div>

</body>
</html> Questa è la scrollbar. Come potete vedere è possibile far apparire la manina quando ci si passa sopra semplicemente usando attributi e metodi Javascript e CSS.

Ecco le tre parti che compongono il nostro script per far scrollare un documento senza usare le barre standard del navigatore!