A SBAFO! Manuali o tutorials gratis

Copyright© Seatiger Team 2002
Sono vietate la riproduzione, la pubblicazione e la distribuzione anche parziale del presente manuale
senza il consenso scritto degli autori.

LEZIONE 11

I puntatori e le barre di scorrimento

Magari per qualcuno può essere un aspetto marginale, ma con i fogli di stile si riesce persino a modificare l'aspetto sia del puntatore del mouse che delle barre di scorrimento laterali. Vediamo in che modo.

11.1 Cambiare aspetto al puntatore

Per cambiare l'aspetto del puntatore su una particolare pagina web e sostituirlo con gli altri puntatori predefiniti di windows, l'elemento di stile da usare è cursor.

Valori ammessi sono:

default (freccia normale)
all-scroll (rombo con puntino centrale)
crosshair (croce)
col-resize (due barrette verticali con freccia orizzontale a due punte)
row-resize (due barrette orizzontali con freccia verticale a due punte)
hand (manina)
no-drop (manina con cartello di divieto)
not-allowed (cartello di divieto)
text (barra verticale con barrette sopra e sotto)
vertical-text (barra orizzontale con barrette a destra e sinistra)
move (due frecce a doppia punta che si incrociano)
e-resize (freccia orizzontale a due punte)
ne-resize (freccia a due punte diagonale rivolta a nordest)
nw-resize (freccia a due punte diagonale rivolta a nordovest)
n-resize (freccia verticale a due punte)
wait (clessidra)
progress (freccia con clessidra)
help (freccia con punto interrogativo)

Vediamo un esempio inserendo l'elemento di stile direttamente in BODY per assegnare il valore all'intera pagina:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     BODY{ background:#FFFFD1;color:#000000;cursor: all-scroll}
     </style>
     </head>
     <body>
     <p>Qui possiamo scrivere quello che vogliamo,<br>
     ma il puntatore avrà sempre l'aspetto <br>
     che avremo definito nel foglio di stile
     </p>
     </body>
</html>

anteprima

Vediamo un secondo esempio cambiando tipo di puntatore. Che ne dici di un bel punto interrogativo?

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     BODY{ background:#FFFFD1;color:#000000;cursor: help}
     </style>
     </head>
     <body>
     <p>Qui possiamo scrivere quello che vogliamo,<br>
     ma il puntatore avrà sempre l'aspetto <br>
     che avremo definito nel foglio di stile<br>
     cioè la freccia con il punto interrogativo
     </p>
     </body>
</html>

anteprima

Ti puoi sbizzarrire a fare prove come meglio credi. Ovviamente, utilizzando classi e selettori di identità, potrai applicare un puntatore diverso per ogni tipo di tag HTML della pagina.

Ma si possono usare solo i cursori predefiniti di Windows? E se volessi sostituirli con un'immagine?

Si può fare, ma saranno visibili soltanto a coloro che utilizzano Internet Explorer© 6 e bisognerà usare immagini particolari, cioè file ".cur" oppure ".ani".

I file ".cur" sono immagini a 24 bit, con un massimo di 256 colori in formato 16x16 o 32x32 pixels. I file ".ani" sono le stesse immagini, ma montate in una sequenza di frames che ne determinano l'animazione.

Entrambi i formati sono elementi dei sistemi operativi GUI (Graphic User Interface) cioè quelli che possiedono un'interfaccia utente che riceve comandi, non tramite una tastiera, ma utilizzando forme grafiche come puntatori, icone, finestre, menu e pulsanti. Sono di tipo GUI le schermate di Windows© e di MacOS©, ma i file ".cur" e ".ani" sono supportati solo da Windows©.

Per applicare un cursore esterno al sistema dovremo utilizzare un valore espresso dalla stringa url ("percorso del file del cursore")

Vediamo un esempio utilizzando un file ".cur" e la solita pagina:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
BODY{background: #FFFFD1;color: #000000;cursor: url("img/startrek.cur")}
</style>
     </head>
     <body>
        <p><strong>MERAVIGLIA, EH?<br></strong>
        Un puntatore personalizzato per il vostro sito!!! Il bello è che tutti
        possono vederlo senza scaricare alcun programma.<br>
        Unico limite è che funziona solo con Internet Explorer 6.
         </p>
   </body>
</html>

anteprima

Ed ora utilizziamo al posto di un file statico, uno dinamico, cioè un file ".ani". La sintassi è sempre la stessa:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
BODY{background: #FFFFD1;color: #000000;cursor: url("img/turtle.ani")}
</style>
     </head>
     <body>
     <p><strong>MERAVIGLIA, EH?<br></strong>
     Un puntatore personalizzato per il vostro sito e per giunta animato!!!
     Il bello è che tutti possono vederlo senza scaricare alcun
     programma.<br>Unico limite è che funziona solo con Internet
     Explorer 6.
     </p>
     </body>
</html>

anteprima

Nota 1: Nell'esempio precedente sono stati usati due files "startrek.cur" e "turtle.ani" che sono presenti nella sottocartella "img". Se i files fossero stati nella stessa cartella il valore dell'elemento di stile sarebbe stato url("startrek.cur"). Ma è possibile collegare anche un file presente in un altro sito. In tal caso il valore dell'elemento di stile cursor sarebbe più o meno in questa forma:
url("http://www.nomedominio.com/nomesito/nomecartella/startrek.cur")

Nota 2: non cercare di utilizzare altri tipi di files come, ad esempio, ".gif" o "jpg" o "ico" o "bmp" cambiando loro solo l'estensione, non funzionerebbe: i file ".cur" e ".ani" sono formati propri e si creano solo con programmi specifici.

Nota 3: alle volte capita, anche avendo il sistema operativo giusto ed il browser corretto, che i puntatori con immagini non di sistema non appaiano: leggendo nel forum della Microsoft© pare che ciò dipenda dalle versioni delle API interne ai diversi programmi. In altre parole non è sufficiente Internet Explorer© 6, ma occorre avere le versioni (build) giuste, normalmente le più recenti.

11.2 Cambiare aspetto alle barre di scorrimento

Vi sono diversi metodi per cambiare aspetto alle grigie barre di scorrimento di Explorer© e renderle più attraenti. A seconda del metodo si useranno solo parte degli elementi di stile che descriveremo.

Per aiutarti a capire i vari elementi di stile su quale parte della barra di scorrimento andranno ad influire, aiutati con questo schema:

Vediamo ora i vari elementi di stile riferiti ale barre di scorrimento:

scrollbar-arrow-color (colore del triangolino posto sui pulsanti della barra)
scrollbar-face-color (colore della superficie piana della barra)
scrollbar-highlight-color (colore del bordo inclinato illuminato della barra)
scrollbar-3dlight-color (colore del bordo verticale della barra sotto il bordo inclinato illuminato)
scrollbar-shadow-color (colore del bordo inclinato in ombra della barra)
scrollbar-darkshadow-color (colore del bordo verticale sotto il bordo inclinato in ombra della barra)
scrollbar-track-color (colore della guida sulla quale scorre la barra)

Abbiamo parlato di bordo illuminato o in ombra perché, per convenzione, la barra viene considerata illuminata da una sorgente di luce posta nell'angolo superiore sinistro dello schermo.

Per ciascun elemento di stile che viene utilizzato occorre assegnare un valore che equivale ad un colore.

Il colore può essere espresso in formato esadecimale preceduto dal simbolo della celletta

scrollbar-face-color:#FF0000

dal nome espresso in lingua inglese (solo per i colori base)

scrollbar-face-color:red

in formato rgb con una particolare sintassi

scrollbar-face-color:rgb(255,0,0)

In tutti e tre gli esempi la barra avrà la superficie piana di colore rosso.

11.2.1 Barre di scorrimento tradizionali

Per cambiare solo i colori e lasciare immutato l'aspetto rotondeggiante delle barre di scorrimento puoi usare solo due elementi di stile:

scrollbar-face-color
scrollbar-arrow-color

Vediamo un esempio:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     BODY{background: #FFFFD1;color: #000000;
     scrollbar-face-color:orange; scrollbar-arrow-color:#FFFF00}
     </style>
     </head>
     <body>
     <p>Con questo foglio di stile abbiamo ottenuto una barra<br>
     di scorrimento tradizionale, ma colorata in arancione<br>
     e con le frecce in giallo.
     </p>
     </body>
</html>

anteprima

11.2.2 Barre di scorrimento piatte

Per mutare radicalmente aspetto alle barre e renderle piatte e leggere dovrai usare tutti o quasi tutti gli elementi di stile, stando molto attento ai dosaggi dei colori.

Vediamo un esempio:

<html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     BODY{background: #FFFFD1;color: #000000;
     scrollbar-arrow-color: lightgray;
     scrollbar-3dlight-color: #888888;
     scrollbar-highlight-color: #000000;
     scrollbar-face-color: #0080FF;
     scrollbar-shadow-color: #0000FF;
     scrollbar-darkshadow-color: #FF0000;
     scrollbar-track-color: #0000AA}
     </style>
     </head>
     <body>
     <p>Con questo foglio di stile abbiamo ottenuto una barra<br>
     di scorrimento piatta colorata diversamente in ogni sua parte.
     </p>
     </body>
</html>

anteprima