code:
<!DOCTYPE HTML SYSTEM "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<Link rel="stylesheet" type="text/css" href="bannerDefault.css"/>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<script type="text/javascript">
function paint(){
var r = document.cp.red.value;
var g = document.cp.green.value;
var b = document.cp.blue.value;
var bw = document.cp.colorbox;
var rok = true;
var gok = true;
var bok = true;
if(0>r || r>255){
alert("RED has an INVALID value: it need to be between 0 and 255");
rok = false;
}
if(0>g || g>255){
alert("GREEN has an INVALID value: it need to be between 0 and 255");
gok = false;
}
if(0>b || b>255){
alert("BLUE has an INVALID value: it need to be between 0 and 255");
bok = false;
}
if(rok && gok && bok){
document.getElementById("colorbox").style.backgroundColor='rgb('+r+','+g+','+b+')';
}
}
function resize(){
var h = document.cp.thumbHeight.value;
var w = document.cp.thumbWidth.value;
var hok = true;
var wok = true;
if(h<50 || h>300){
alert("HEIGHT has an INVALID value: it need to be between 50 and 300");
hok = false;
}
if(w<50 || w>300){
alert("WIDTH has an INVALID value: it need to be between 50 and 300");
wok = false;
}
if(wok){
document.getElementById("colorbox").style.width=w;
alert(document.getElementById("colorbox").style.width);
document.getElementById("colorbox").style.width=w;
}
if(hok){
document.getElementById("colorbox").style.height=h+'';
}
}
</script>
</head>
<body onload="paint(), resize()">
<form method="post" action="test.html" name="cp">
<table class="gallery">
<tr>
<td colspan="2" style="font-weight:bold;">
Dimensioni Icone
</td>
</tr>
<td style="width:50%; text-align:right; border:0px solid blue">
Width :
</td>
<td style="width:50%; text-align:left; border:0px solid blue">
<input name="thumbWidth" value="250" style="border:1px solid gray" maxlength="3" size="3" onChange="resize()"> px
</td>
</tr>
<tr>
<td style="width:50%; text-align:right; border:0px solid blue">
Height :
</td>
<td style="width:50%; text-align:left; border:0px solid blue">
<input name="thumbHeight" value="150" style="border:1px solid gray" maxlength="3" size="3" onChange="resize()"> px
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2" style="font-weight:bold;">
Background
</td>
</tr>
<tr>
<td style="width:50%; text-align:right; border:0px solid blue">
Red :
</td>
<td style="width:50%; text-align:left; border:0px solid blue">
<input name="red" value="255" style="border:1px solid gray; color:red" maxlength="3" size="3" OnKeyUp="paint()"> px
</td>
</tr>
<tr>
<td style="width:50%; text-align:right; border:0px solid blue">
Green :
</td>
<td style="width:50%; text-align:left; border:0px solid blue">
<input name="green" value="200" style="border:1px solid gray; color:green" maxlength="3" size="3" OnKeyUp="paint()"> px
</td>
</tr>
<tr>
<td style="width:50%; text-align:right; border:0px solid blue">
Blue :
</td>
<td style="width:50%; text-align:left; border:0px solid blue">
<input name="blue" value="180" style="border:1px solid gray; color:blue" maxlength="3" size="3" OnKeyUp="paint()"> px
</td>
</tr>
<tr>
<td colspan="2" style="font-weight:bold;">
</td>
</tr>
<tr>
<td colspan="2" style="font-weight:bold;">
Preview
</td>
</tr>
<tr>
<td colspan="2" align="center">
<div id="colorbox" style="border:1px solid red;">
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
[HTML+javascript] perchè da mozilla non funziona?