Farbauswahl - Beispiel für JavaScript-Programmierung
Die Funktionalität dieser Seite wird nicht von allen Browsern korrekt unterstützt.
Netscape Navigator und MS Internet Explorer müßten aber ihren Dienst tun.
| Quelltext für das Auswahlformular |
|---|
<form name="Farbauswahl"> <table cellpadding="1" cellspacing="0" border="0"><tr><td style="background:#000000"> <table cellpadding="5" cellspacing="1" border="0"> <tr><td style="background:#F0F0C0"> Rot-Anteil </td><td style="background:#F0F0C0"> Grün-Anteil </td><td style="background:#F0F0C0"> Blau-Anteil </td><td style="background:#F0F0C0"> Farb-String </td></tr> <tr><td style="background:#D0F0D0"> <input name="rot" size="4" onChange="ColorSelect()"><br> <a href="javascript:ColorRealize(_red-1,_green,_blue)" style="text-decoration:none">-</a> <a href="javascript:ColorRealize(_red+1,_green,_blue)" style="text-decoration:none">+</a> <a href="javascript:ColorRealize(_red-16,_green,_blue)" style="text-decoration:none">--</a> <a href="javascript:ColorRealize(_red+16,_green,_blue)" style="text-decoration:none">++</a> </td><td style="background:#D0F0D0"> <input name="gruen" size="4" onChange="ColorSelect()"><br> <a href="javascript:ColorRealize(_red,_green-1,_blue)" style="text-decoration:none">-</a> <a href="javascript:ColorRealize(_red,_green+1,_blue)" style="text-decoration:none">+</a> <a href="javascript:ColorRealize(_red,_green-16,_blue)" style="text-decoration:none">--</a> <a href="javascript:ColorRealize(_red,_green+16,_blue)" style="text-decoration:none">++</a> </td><td style="background:#D0F0D0"> <input name="blau" size="4" onChange="ColorSelect()"><br> <a href="javascript:ColorRealize(_red,_green,_blue-1)" style="text-decoration:none">-</a> <a href="javascript:ColorRealize(_red,_green,_blue+1)" style="text-decoration:none">+</a> <a href="javascript:ColorRealize(_red,_green,_blue-16)" style="text-decoration:none">--</a> <a href="javascript:ColorRealize(_red,_green,_blue+16)" style="text-decoration:none">++</a> </td><td style="background:#D0F0D0"> <input name="output" size="9" onChange="ColorSelect()" readonly><br> <a href="javascript:ColorRealize(_red-1,_green-1,_blue-1)" style="text-decoration:none">-</a> <a href="javascript:ColorRealize(_red+1,_green+1,_blue+1)" style="text-decoration:none">+</a> <a href="javascript:ColorRealize(_red-16,_green-16,_blue-16)" style="text-decoration:none">--</a> <a href="javascript:ColorRealize(_red+16,_green+16,_blue+16)" style="text-decoration:none">++</a> </td></tr> <tr><td align=center colspan="4" style="background:#D0F0D0"> <input type=button value="Farbe setzen" onClick="ColorSelect()"> <input type=button value="weißer Hintergrund" onClick="ColorRealize(255,255,255)"> </td></tr> <tr><td align=right colspan="4" style="background:#E0E8D0"><span style="white-space:nowrap;"> Graustufen: <input type=button value="weiß" onClick="ColorRealize(255,255,255)"> <input type=button value="hell" onClick="ColorRealize(192,192,192)"> <input type=button value="mittel" onClick="ColorRealize(128,128,128)"> <input type=button value="dunkel" onClick="ColorRealize(64,64,64)"> <input type=button value="schwarz" onClick="ColorRealize(0,0,0)"> </span></td></tr> <tr><td align=right colspan="4" style="background:#E0E8D0"><span style="white-space:nowrap;"> sehr helle Pastellfarben: <input type=button value="rot" onClick="ColorRealize(255,224,224)"> <input type=button value="gelb" onClick="ColorRealize(255,255,224)"> <input type=button value="grün" onClick="ColorRealize(224,255,224)"> <input type=button value="türkis" onClick="ColorRealize(224,255,255)"> <input type=button value="blau" onClick="ColorRealize(224,224,255)"> <input type=button value="lila" onClick="ColorRealize(255,224,255)"> </span></td></tr> <tr><td align=right colspan="4" style="background:#E0E8D0"><span style="white-space:nowrap;"> helle Pastellfarben: <input type=button value="rot" onClick="ColorRealize(255,192,192)"> <input type=button value="gelb" onClick="ColorRealize(255,255,192)"> <input type=button value="grün" onClick="ColorRealize(192,255,192)"> <input type=button value="türkis" onClick="ColorRealize(192,255,255)"> <input type=button value="blau" onClick="ColorRealize(192,192,255)"> <input type=button value="lila" onClick="ColorRealize(255,192,255)"> </span></td></tr> <tr><td align=right colspan="4" style="background:#E0E8D0"><span style="white-space:nowrap;"> Pastellfarben: <input type=button value="rot" onClick="ColorRealize(255,128,128)"> <input type=button value="gelb" onClick="ColorRealize(255,255,128)"> <input type=button value="grün" onClick="ColorRealize(128,255,128)"> <input type=button value="türkis" onClick="ColorRealize(128,255,255)"> <input type=button value="blau" onClick="ColorRealize(128,128,255)"> <input type=button value="lila" onClick="ColorRealize(255,128,255)"> </span></td></tr> <tr><td align=right colspan="4" style="background:#E0E8D0"><span style="white-space:nowrap;"> helle Farben: <input type=button value="rot" onClick="ColorRealize(255,0,0)"> <input type=button value="gelb" onClick="ColorRealize(255,255,0)"> <input type=button value="grün" onClick="ColorRealize(0,255,0)"> <input type=button value="türkis" onClick="ColorRealize(0,255,255)"> <input type=button value="blau" onClick="ColorRealize(0,0,255)"> <input type=button value="lila" onClick="ColorRealize(255,0,255)"> </span></td></tr> <tr><td align=right colspan="4" style="background:#E0E8D0"><span style="white-space:nowrap;"> mittlere Farben: <input type=button value="rot" onClick="ColorRealize(192,0,0)"> <input type=button value="gelb" onClick="ColorRealize(192,192,0)"> <input type=button value="grün" onClick="ColorRealize(0,192,0)"> <input type=button value="türkis" onClick="ColorRealize(0,192,192)"> <input type=button value="blau" onClick="ColorRealize(0,0,192)"> <input type=button value="lila" onClick="ColorRealize(192,0,192)"> </span></td></tr> <tr><td align=right colspan="4" style="background:#E0E8D0"><span style="white-space:nowrap;"> dunkle Farben: <input type=button value="rot" onClick="ColorRealize(128,0,0)"> <input type=button value="gelb" onClick="ColorRealize(128,128,0)"> <input type=button value="grün" onClick="ColorRealize(0,128,0)"> <input type=button value="türkis" onClick="ColorRealize(0,128,128)"> <input type=button value="blau" onClick="ColorRealize(0,0,128)"> <input type=button value="lila" onClick="ColorRealize(128,0,128)"> </span></td></tr> </table> </td></tr></table> </form> |
| JavaScript-Quelltext im head-Teil |
|---|
<script type="text/javascript">
<!--
var HexArray=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
var ColorString="",_red=255,_green=255,_blue=255;
var incount=0;
function HexHex(a)
/* rechnet eine Zahl zwischen 0 und 15 in ein Hex-Zeichen um */
{
return HexArray[a];
}
function HexByte(a)
/* rechnet eine Zahl zwischen 0 und 255 in eine zweistellige Hex-Zeichenkette um */
{
return HexHex(Math.floor(a/16))+HexHex(a%16);
}
function RangeCheck(a)
/* sichert den zulaessigen Zahlenbereich */
{
if (!a)
a=0;
if (a<0)
a=0;
if (a>255)
a=255;
return a;
}
function ColorRealize(r,g,b)
/* setzt die Farbveränderung um */
{
incount++;
_red=RangeCheck(r);
_green=RangeCheck(g);
_blue=RangeCheck(b);
ColorString="#"+HexByte(_red)+HexByte(_green)+HexByte(_blue);
document.body.style.background=ColorString;
document.Farbauswahl.rot.value=""+_red;
document.Farbauswahl.gruen.value=""+_green;
document.Farbauswahl.blau.value=""+_blue;
document.Farbauswahl.output.value=""+ColorString;
incount--;
}
function ColorSelect()
/* rechnet drei Inhalte von Eingabefeldern in Farbwerte um und ruft ColorRealize auf */
{
incount++;
if (incount==1) /* stellt sicher, dass kein Rekursionseffekt auftritt */
{
_red=parseInt(document.Farbauswahl.rot.value);
_green=parseInt(document.Farbauswahl.gruen.value);
_blue=parseInt(document.Farbauswahl.blau.value);
ColorRealize(_red,_green,_blue);
}
incount--;
}
//-->
</script>
|