Lo script che presentiamo permette all'utente di scegliere il layout grafico che più preferisce in base a dei fogli di stile esterni scelti da noi.
Lo script è perfettamente compatibile con Internet Explorer mentre con Netscape 6 potremmo avere qualche problema con il cambiamento del colore di sfondo (per il resto non ci sono problemi).
L'esempio si compone di 5 file:
- esempio.htm
- style_1.css
- style_2.css
- style_3.css
- style_4.css
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Prima di inserire lo script bisogna impostare alcuni fogli di stile con diverse caratteristiche per ognuno di essi.
In questo esempio ne preparerò due e li chiamerò "stile_1.css" e "stile_2.css".
stile_1.css
body{
color: white;
background-color: #000080;
font-family: verdana;
font-size: 10px;
font-style: bold;
scrollbar-base-color: #000080;
}
A:link {color:#FFFF00; text-decoration:none;}
A:visited {color:#FFFF00; text-decoration:none;}
A:active {color:#FFFF00; text-decoration:none;}
A:hover {color:#FF8000; text-decoration:none;}
Nel primo css ho definito:
il colore del testo (bianco)
il colore di sfondo (blu)
il tipo di font (verdana)
la grandezza del font (10px)
lo stile del font (grassetto)
il colore di base della scrollbar (blu ma solo per IE 5.5 e superiori)
le proprietà dei link (gialli, senza sottolineatura, con effetto hover)
Faccio la stessa cose per il secondo foglio di stile cambiando, ovviamente, alcuni parametri
stile_2.css
body{
color: yellow;
background-color: #990000;
font-family: tahoma;
font-size: 18px;
scrollbar-base-color: #990000;
}
A:link {color:#FFFF00; text-decoration:none;}
A:visited {color:#FFFF00; text-decoration:none;}
A:active {color:#FFFF00; text-decoration:none;}
A:hover {color:#FFFFFF; text-decoration:none;}
Adesso basta salvare i file con estensione .css
A questo punto, tra i tag head della pagina, inseriamo il tag di richiamo ai fogli di stile esterni (dobbiamo mettere un tag per ogni css creato).
<link rel="stylesheet" href="style_1.css">
<link rel="stylesheet" href="style_2.css">
Subito sotto queste due righe, inseriamo (sempre tra gli <head>) lo script vero e proprio:
<script type="text/javascript" language="javascript">
</script>
La personalizzazione non richiede molto lavoro. Ciò che possiamo scegliere è se far visualizzare o meno un ALERT contenente un messaggio.
var doAlerts=false;
cambiando il valore "false" con "true" verrà mostrato un messaggio ogni volta che si cambia stile. Il messaggio visualizzato sarà
"Stile selezionato: [numero dello stile scelto]"
La scritta può essere cambiata modificando questa stringa
if (doAlerts) alert('Stile selezionato: '+(whichSheet+1)); //rispettare gli apici
Nel corpo della pagina, invece, scriviamo i link che richiamano i singoli css
<a href="JavaScript:changeSheets(1)">Stile 1</a>
<a href="JavaScript:changeSheets(2)">Stile 2</a>
Prima di concludere qualche piccolo chiarimento.
È possibile inserire un numero virtualmente infinito di css; l'importante sarà utilizzare un tag di richiamo (<link rel="stylesheet" href="xxxxx.css">) per ogni css creato. Si dovrà, inoltre, seguire la numerazione progressiva tra le parentesi (<a href="JavaScript:changeSheets(n_numero)">)quando inseriremo il link nella pagina.
Altre modifiche non sono necessarie.
