Assegnare un colore di sfondo ad una pagina web da una select

Questo è stato anche pensato in previsione di coloro i quali hanno delle difficoltà a leggere testo su un colore di background a non alto contrasto. La pagina che alla fine vi mostrerò potrebbe non essere del tutto accessibile dal punto di vista dei colori scelti ma, apportando piccole modifiche la stessa potrebbe essere fruibile da persone affette da ipovisione o altri problemi. Il tutto si concentra, come è scritto nel titolo, in un semplice menu di scelta, altrimenti detto "select".

Ho pensato anche di visualizzare una anteprima del colore, nella stessa select, in modo da individuare presto quello più congeniale. Mi sono avvalso anche di un pò di codice CSS. Possiamo tranquillamente dire che ormai lo ritroviamo ovunque nelle nostre pagine.

Il codice CSS

Il codice utilizzato si rivolge prevalentemente al menu di scelta. Ho impostato una lunghezza, attraverso una classe, pari a 150 pixel:

.menu{
width:150px;
}

Adesso passiamo alle classi che saranno applicate ognuna al colore che assumerà la pagina. I colori che ho preparato per l' esempio sono 4: verde, giallo, arancio e celeste. In questo modo ogni "rigo" del menu di scelta avrà il colore di background della pagina. Ho dichiarato le 4 classi con lo stesso nome, cioè:

.verde{
background:green;
color:#fff;
}

La stessa cosa dicasi per gli altri tre colori; il background cambierà, invece il colore del testo l' ho lasciato sempre bianco.

Implementare la select nella pagina html

Non essendoci altre dichiarazioni per quanto riguarda il codice CSS, passiamo all' inserimento del menu nella pagina. Il colore di default dello sfondo è bianco. Di conseguenza nel body va dichiarato:

<body bgcolor="#ffffff">

Dobbiamo inscrivere il menu di scelta in un tag <form>, in questo modo:

<form action="" name="form1">
.......
.......
</form>

Adesso vedremo quale codice inserire al posto dei puntini. Come potrete notare, l' action del form non è importante in quanto il menu non deve "rimandare" a nessuna pagina dopo aver scelto il colore. Per una correttezza semantica della pagina ho assegnato anche un nome allo stesso form. Il tag che permette di introdure un menu select è appunto <select>. Il suo codice è:

<form action="" name="form1">
<select class="menu">
<option value="#ffffff"> Scegli il colore</option>
<option value="green" class="verde">verde</option>
<option value="#ff9900" class="giallo">giallo</option>
<option value="#ff6600" class="arancio">arancio</option>
<option value="#0099dd" class="celeste">celeste</option>
</select>
</form>

Il codice JavaScript

Se lasciassimo il menu solo con questo codice, non avremmo nessun evento sul colore di sfondo della pagina. Dobbiamo introdurre il codice JavaScript per fare in modo che ad ogni scelta avvenga il cambiamento. Nel tag <select> di apertura, si deve scrivere:

<select onchange="document.bgColor=this.options[this.selectedIndex].value"  class="menu">  

Se voleste provare a realizzare un menu personalizzato, potete copiare ed incollare questo codice all' interno dela vostra pagina. Cosa indica il codice: ad ogni scelta [onchange] cambia il colore di sfondo della pagina [ document.bgColor ] prendendo i colori da quelli impostati in ogni rigo del value ( this.options[this.selectedIndex].value ). La pagina dell' esempio finale, mostra il menu di scelta in azione.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati