Asbafo
a- a+

I contatori e le barre di scorrimento


Magari per qualcuno può essere un aspettomarginale, ma con i fogli di stile si riesce persino amodificare l'aspetto sia del puntatore del mouseche delle barre di scorrimento laterali. Vediamo in chemodo.
 

Cambiare aspetto al puntatore

 
Per cambiare l'aspetto del puntatore su unaparticolare pagina web e sostituirlo con gli altripuntatori predefiniti di windows, l'elemento distile 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>
 
 

 

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>
 
 
 
Ti puoi sbizzarrire a fare prove come meglio credi.Ovviamente, utilizzando classi e selettori diidentità, potrai applicare un puntatore diversoper ogni tipo di tag HTML della pagina.

 

Ma si possono usare solo i cursori predefiniti diWindows? 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>
 
 

 

Ed ora utilizziamo al posto di un file statico, unodinamico, cioè un file ".ani". Lasintassi è 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>
 
 
 
Nota 1: Nell'esempio precedente sono stati usatidue files "startrek.cur" e"turtle.ani" che sono presenti nellasottocartella "img". Se i files fossero statinella stessa cartella il valore dell'elemento distile sarebbe stato url("startrek.cur"). Maè possibile collegare anche un file presente inun altro sito. In tal caso il valore dell'elementodi stile cursor sarebbe più o meno in questaforma:
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 grigiebarre di scorrimento di Explorer© e renderlepiù attraenti. A seconda del metodo si userannosolo 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 barredi 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-

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 immutatol'aspetto rotondeggiante delle barre di scorrimentopuoi 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>
 
 

 

11.2.2 Barre di scorrimento piatte

 
Per mutare radicalmente aspetto alle barre e renderlepiatte e leggere dovrai usare tutti o quasi tutti glielementi di stile, stando molto attento ai dosaggi deicolori.

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>
 
 
 
Nota: Le barre di scorrimento colorate sono supportatesolo da Internet Explorer 5.5© e versionisuccessive.

 



Ti potrebbe interessare anche

commenta la notizia