yesterday I was animated to do the Color-Picker right.
<html>
<head>
<script type="text/javascript">
function Slider(i,c)
{
//Get last Image
im = c + document.getElementById(c).value
d=document.all[im];
switch (c)
{
case "r":
d.bgColor = "#ff0000";
break;
case "g":
d.bgColor = "#00ff00";
break;
case "b":
d.bgColor = "#0000ff";
break;
}
//Set Textbox to value
document.getElementById(c).value = i;
//Hide actual Image
im = c + i;
d=document.all[im];
d.bgColor = "#000000";
//Set <hr color=""> to Hexcode
var r,g,b;
r = Math.round((document.all.r.value*255)/31);
g = Math.round((document.all.g.value*255)/31);
b = Math.round((document.all.b.value*255)/31);
document.getElementById('color').color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
document.getElementById('action').value = 'color'+document.all.r.value+'-'+document.all.g.value+'-'+document.all.b.value;
}
function submitformColor()
{
var oRequest = new XMLHttpRequest();
var sURL = '/?action='+document.getElementById('action').value;
oRequest.open("GET",sURL,false);
oRequest.setRequestHeader("User-Agent",navigator.userAgent);
oRequest.send(null)
if (oRequest.status==200)
{
//Get Answer
//var txt = oRequest.responseText;
//document.write(txt);
//Stay on actual Site
return false;
}
else
document.write('Error!');
//
document.forms["myform"].submit();
}
</script>
<title>Arduino Webserver 1.0 - Color</title>
</head>
<body bgcolor='#444444' text="#c0c0c0" OnLoad="ReadCookie()">
<table border='0' width='480' cellpadding='5'>
<tr><td>
<br><hr/>
<h2><div align='center'><font color='#2076CD'>Arduino Webserver 1.0</font></div></h2>
<hr/><br>
<div align='left'><font face='Verdana' color='#FFFFFF'>Colorpicker</font></div>
<br>
<table border='1' width='460' cellpadding='5'>
<tr bgColor='#222222'>
<td align='center' bgcolor='#222222'>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="text" id="r" size="2" value="0"></td>
<script type="text/javascript">
for (i=0;i<=31;i++)
document.write("<td bgcolor='#ff0000' height=40 width=10 onMouseOver='Slider(" + i + ",\"r\")' id='r" + i + "'></td>"); </script>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="text" id="g" size="2" value="0"></td>
<script type="text/javascript">
for (i=0;i<=31;i++)
document.write("<td bgcolor='#00ff00' height=40 width=10 onMouseOver='Slider(" + i + ",\"g\")' id='g" + i + "'></td>");
</script>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input type="text" id="b" size="2" value="0"></td>
<script type="text/javascript">
for (i=0;i<=31;i++)
document.write("<td bgcolor='#0000ff' height=40 width=10 onMouseOver='Slider(" + i + ",\"b\")' id='b" + i + "'></td>");
</script>
</tr>
</table>
</td></tr>
<tr><td align='center' bgcolor='#222222'>
<hr color="#ffffff" size="50" width="50" id="color"></hr>
</td></tr>
<tr bgColor='#222222'>
<td align='center' bgcolor='#222222'>
<form id="myform" action="../?" onsubmit="return submitformColor();">
<input type='hidden' name='action' id="action">
<input type="submit" name="btn" value="Change">
</form>
</td>
</tr>
</table>
<br>
</td></tr>
</table>
<a href="INDEX.HTM">Back</a>
</body></html>
Show Posts
, das macht das Ganze deutlich leserlicher 