Lo script che presentiamo consente l'inserimento nelle nostre pagine web di una utility che può risultare comoda in tutti quei casi in cui si voglia far scegliere all'utente un colore da inviare magari come valore di un form. L'ideale è presentare ai visitatori una palette da cui effettuare la scelta con un semplice click. È quello che fa questo Color Picker di Fooble.com. Sulla pagina http://www.flooble.com/scripts/colorpicker.php è possibile personalizzare ulteriormente lo script adattandolo alla proprie esigenze. Un ottimo generatore provvederà a fornire tutto il codice necessario, pronto per essere copiato e incolalto. Quella che presentiamo è la versione base.
- esempio.htm
## 1: LA SEZIONE JAVASCRIPT
Nella sezione <head></head> trova posto la lunga libreria che provvede a generare la palette, a configurare gli eventi e il diplay. Può essere lasciata intatta, a meno di non voler personalizzare l'intestazione della tabella. Se è questo che si vuole ottenere, basterà intervenire su queste righe:
elemDiv.innerHTML = '<span style="font-family:Verdana; font-size:11px;">'
elemDiv.innerHTML += 'Pick a color: (<a href="javascript:setColor('');">';
elemDiv.innerHTML += 'No color</a>)<br /> getColorTable()
elemDiv.innerHTML += '<div align="center">';
elemDiv.innerHTML += '<a href="http://www.flooble.com/scripts/colorpicker.php">';
elemDiv.innerHTML += 'color picker</a>';
elemDiv.innerHTML += 'by <a href="http://www.flooble.com"> <strong>flooble</strong></a>';
elemDiv.innerHTML += '</div></span>';
## 2: RICHIAMO INTERNO ALLA PAGINA WEB
Se si visualizza l'esempio, si noterà che la palette da cui scegliere il colore è attivata con un click su un piccolo quadratino inizialmente bianco. Esso viene generato con questo codice:
<a href="javascript:pickColor('pick1116105255');" id="pick1116105255"
style="border: 1px solid #000000; font-family:Verdana; font-size:10px;
text-decoration: none;"> </a>
<input id="pick1116105255field" size="7"
onChange="relateColor('pick1116105255', this.value);" title="color" name="scegli" value="#FFFFFF">
<script type="text/javascript" language="javascript">relateColor('pick1116105255', getObj('pick1116105255field').value);</script>
A fianco trova posto un campo di testo (input) che prende come valore il codice esadecimale del colore scelto. Volendo inviare tale valore con un modulo si dovrà fare riferimento ad esso per catturare tutti i parametri.
