Lo script che presentiamo converte i colori RGB in valori esadecimali e mostra il colore in una finestra di pop-up.
Il codice non necessita di alcuna personalizzazione ed è perfettamente compatibile con Internet Explorer, Netscape 6.x e Mozilla. Netscape 4.x, invece, non mostrerà il colore nella finestra di pop-up.
- esempio.htm"
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.
Inseriamo il seguente codice javaScript tra i tag <head> della pagina:
<script type="text/javascript" language="javascript">
<!-- Hide Me
////////////////////////////////////////////////////////////////////////////
// JavaScript RGB to Hexidecimal Color Converter -- Version 1.0 -- 4/23/97
//
// -- Convert RGB values to hexidecimal values on the client side --
// Written by Mike Brittain (brittaim@lafayette.edu)
//
// Copyright (c) Eyeful Web Enterprises, 1997
// All Rights Reserved.
//
// *FREEWARE* - This script may be distributed freely (without charge) as long
as the above comments remain intact.
//
// Visit Eyeful Web Enterprises at: http://www.lafayette.edu/~brittaim/
//
////////////////////////////////////////////////////////////////////////////
var bgcolor = "#000000";
var RGB = new Array(256);
var k = 0;
var hex = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B",
"C", "D", "E", "F");
for (i = 0; i < 16; i++) {
for (j = 0; j < 16; j++) {
RGB[k] = hex[i] + hex[j];
k++;
}
}
function dropLeadingZeros(num){
while (num.charAt(0) == "0") {
newTerm = num.substring(1, num.length);
num = newTerm;
}
if (num == "")
num = "0";
return num;
}
function convert(form){
while ((form.red.value> 255) || (form.red.value < 0)) {
alert("All RGB values must be between 0 and 255.")
form.red.value = 0;
form.red.focus();
}
while ((form.green.value> 255) || (form.green.value < 0)) {
alert("All RGB values must be between 0 and 255.")
form.green.value = 0;
form.green.focus();
}
while ((form.blue.value> 255) || (form.blue.value < 0)) {
alert("All RGB values must be between 0 and 255.")
form.blue.value = 0;
form.blue.focus();
}
if (form.red.value == "")
form.red.value = 0;
if (form.green.value == "")
form.green.value = 0;
if (form.blue.value == "")
form.blue.value = 0;
form.red.value = dropLeadingZeros(form.red.value);
form.green.value = dropLeadingZeros(form.green.value);
form.blue.value = dropLeadingZeros(form.blue.value);
rr = RGB[form.red.value]
gg = RGB[form.green.value]
bb = RGB[form.blue.value]
bgcolor = "#" + rr + gg + bb;
form.hex.value = bgcolor;
tinywindow('small');
colorWindow();
}
function colorWindow(){
colorwindow.document.bgColor = bgcolor;
//colorwindow.document.write(' ');
colorwindow.window.focus();
}
var colorwindow = null;
var winopts =
"toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=0,width=75,height=75";
function tinywindow(windowname) {
colorwindow = open("", windowname, winopts);
}
// End Hide -->
</script>
Questo codice non necessita di personalizzazione e può essere lasciato così.
A questo punto, nello spazio della pagina in cui vorremo far comparire il convertitore, inseriremo il codice HTML:
<FORM METHOD=post>
<TABLE width=400 border="0">
<TR>
<td align="center" COLSPAN=3>
<font size="+2" face="arial, helvetica"><strong>Convertitore
di Colori JavaScript</strong></font><br />
<font size="+1" face="arial, helvetica"><strong>Da RGB a
Esadecimali</strong></font>
</td>
</TR>
<TR>
<td ALIGN=right>
<br /><strong><font
COLOR="#808000">R:</font></strong>
<INPUT TYPE=text NAME="red" size=3 MAXLENGTH=3
onFocus="this.select()"><br />
<strong><font COLOR="#808000">G:</font></strong>
<INPUT TYPE=text NAME="green" size=3 MAXLENGTH=3
onFocus="this.select()"><br />
<strong><font COLOR="#808000">B:</font></strong>
<INPUT TYPE=text NAME="blue" size=3 MAXLENGTH=3
onFocus="this.select()">
</td>
<td VALIGN=bottom align="center">
<INPUT TYPE=button NAME=button1 VALUE="Converti!"
onClick="convert(this.form);">
</td>
<td width=50> </td>
</TR>
<TR>
<td COLSPAN=2 ALIGN=right>
<HR NOSHADE size=1><strong>HEX:</strong>
<INPUT TYPE=text NAME="hex" size=12 MAXLENGTH=12
onFocus="this.select()">
</td>
<td> </td>
</TR>
</table>
</FORM>
La tabella e il codice relativo possono essere personalizzati a piacimento. Occorre soltanto far attenzione a non modificare le funzioni JavaScript richiamate.
Altre modifiche non sono necessarie.
