Farbauswahl - JavaScript - Quelltext
Quelltext von farbwaehler/index.html
Im folgenden Quelltext sind Kommentare grün, der wichtige JavaScript-Teil fett und rot markiert.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="de">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<meta name="author" content="Ulrich Kritzner">
<meta name="robots" content="none">
<title>
JavaScript - Beispiel - Farbauswahl
</title>
<link rel="stylesheet" type="text/css" href="../../droep.css">
<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 BGCS="",FGCS="",bg_red=255,bg_green=255,bg_blue=255,fg_red=0,fg_green=0,fg_blue=0;
var incount=0,divobject=0;
function GetDivObject(Div_ID)
/* Div-Sektion-Objekt ermitteln */
{
/* MSIE, Konqueror, Opera : */
if (window.document.all)
return eval("window.document.all."+Div_ID);
/* Netscape6/Mozilla : */
if (typeof(window.document.getElementById)=="function")
return window.document.getElementById(Div_ID);
}
function FillDiv()
/* Div-Sektion mit Inhalt fuellen */
{
if (!(typeof(divobject)=="object"))
return;
var text="<table border=\"0\" cellpadding=\"20\" cellspacing=\"0\" width=\"100%\">\n";
text+="<tr><td style=\"background:"+BGCS+"; color:"+FGCS+";\">\n";
text+="Und so sieht die aktuelle Farbauswahl aus.<br>(angucken und staunen)";
text+="</td></tr></table>";
divobject.innerHTML=text;
}
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 BGRealize(set,bg_r,bg_g,bg_b)
/* setzt die Hintergrund-Farbveränderung um */
{
incount++;
bg_red=RangeCheck(bg_r);
bg_green=RangeCheck(bg_g);
bg_blue=RangeCheck(bg_b);
BGCS="#"+HexByte(bg_red)+HexByte(bg_green)+HexByte(bg_blue);
document.BGFORM.rot.value=""+bg_red;
document.BGFORM.gruen.value=""+bg_green;
document.BGFORM.blau.value=""+bg_blue;
document.BGFORM.output.value=""+BGCS;
if (set)
FillDiv();
incount--;
}
function FGRealize(set,fg_r,fg_g,fg_b)
/* setzt die Vordergrund-Farbveränderung um */
{
incount++;
fg_red=RangeCheck(fg_r);
fg_green=RangeCheck(fg_g);
fg_blue=RangeCheck(fg_b);
FGCS="#"+HexByte(fg_red)+HexByte(fg_green)+HexByte(fg_blue);
document.FGFORM.rot.value=""+fg_red;
document.FGFORM.gruen.value=""+fg_green;
document.FGFORM.blau.value=""+fg_blue;
document.FGFORM.output.value=""+FGCS;
if (set)
FillDiv();
incount--;
}
function ColorRealize(bg_r,bg_g,bg_b,fg_r,fg_g,fg_b)
/* setzt die Farbveränderung um */
{
BGRealize(0,bg_r,bg_g,bg_b);
FGRealize(0,fg_r,fg_g,fg_b);
FillDiv();
}
function ColorSelect()
/* rechnet drei Inhalte von Eingabefeldern in Farbwerte um und ruft ColorRealize auf */
{
incount++;
if (incount==1) /* stellt sicher, dass kein Rekursionseffekt auftritt */
{
bg_red=parseInt(document.BGFORM.rot.value);
bg_green=parseInt(document.BGFORM.gruen.value);
bg_blue=parseInt(document.BGFORM.blau.value);
fg_red=parseInt(document.FGFORM.rot.value);
fg_green=parseInt(document.FGFORM.gruen.value);
fg_blue=parseInt(document.FGFORM.blau.value);
ColorRealize(bg_red,bg_green,bg_blue,fg_red,fg_green,fg_blue);
}
incount--;
}
function Init()
{
divobject=GetDivObject("beispiel");
ColorRealize(255,255,0,0,0,192);
}
//-->
</script>
</head>
<body onLoad="Init()">
<a name="v0"></a>
<h2>Farbauswahl - Beispiel für JavaScript-Programmierung</h2>
<a href="../index.html">zurück zum Index</a><br>
<a href="quelltext.html">Quelltextbesichtigung</a><br><br>
Wähle die Farbanteile (additive Mischung):<br>
Die Funktionalität dieser Seite wird nicht von allen Browsern korrekt unterstützt.<br>
Netscape6/Mozilla, Konqueror und MS Internet Explorer müßten aber ihren Dienst tun.
<br><br>
veränderlicher Bereich:
<div name="beispiel" id="beispiel">
In Netscape4 und Opera läuft hier leider nix. Schade.
</div>
<br><br>
<table cellpadding="5" cellspacing="0" border="0" align=center><tr><th>
Hintergrundfarbe
</th><th>
Vordergrundfarbe
</th></tr><tr><td style="background:#000000">
<table cellpadding="5" cellspacing="1" border="0">
<form name="BGFORM">
<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:BGRealize(1,bg_red-1,bg_green,bg_blue)" style="text-decoration:none">-</a>
<a href="javascript:BGRealize(1,bg_red+1,bg_green,bg_blue)" style="text-decoration:none">+</a>
<a href="javascript:BGRealize(1,bg_red-16,bg_green,bg_blue)" style="text-decoration:none">--</a>
<a href="javascript:BGRealize(1,bg_red+16,bg_green,bg_blue)" style="text-decoration:none">++</a>
</td><td style="background:#D0F0D0">
<input name="gruen" size="4" onChange="ColorSelect()"><br>
<a href="javascript:BGRealize(1,bg_red,bg_green-1,bg_blue)" style="text-decoration:none">-</a>
<a href="javascript:BGRealize(1,bg_red,bg_green+1,bg_blue)" style="text-decoration:none">+</a>
<a href="javascript:BGRealize(1,bg_red,bg_green-16,bg_blue)" style="text-decoration:none">--</a>
<a href="javascript:BGRealize(1,bg_red,bg_green+16,bg_blue)" style="text-decoration:none">++</a>
</td><td style="background:#D0F0D0">
<input name="blau" size="4" onChange="ColorSelect()"><br>
<a href="javascript:BGRealize(1,bg_red,bg_green,bg_blue-1)" style="text-decoration:none">-</a>
<a href="javascript:BGRealize(1,bg_red,bg_green,bg_blue+1)" style="text-decoration:none">+</a>
<a href="javascript:BGRealize(1,bg_red,bg_green,bg_blue-16)" style="text-decoration:none">--</a>
<a href="javascript:BGRealize(1,bg_red,bg_green,bg_blue+16)" style="text-decoration:none">++</a>
</td><td style="background:#D0F0D0">
<input name="output" size="9" onChange="ColorSelect()" readonly><br>
<a href="javascript:BGRealize(1,bg_red-1,bg_green-1,bg_blue-1)" style="text-decoration:none">-</a>
<a href="javascript:BGRealize(1,bg_red+1,bg_green+1,bg_blue+1)" style="text-decoration:none">+</a>
<a href="javascript:BGRealize(1,bg_red-16,bg_green-16,bg_blue-16)" style="text-decoration:none">--</a>
<a href="javascript:BGRealize(1,bg_red+16,bg_green+16,bg_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="BGRealize(1,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="BGRealize(1,255,255,255)">
<input type=button value="hell" onClick="BGRealize(1,192,192,192)">
<input type=button value="mittel" onClick="BGRealize(1,128,128,128)">
<input type=button value="dunkel" onClick="BGRealize(1,64,64,64)">
<input type=button value="schwarz" onClick="BGRealize(1,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="BGRealize(1,255,224,224)">
<input type=button value="gelb" onClick="BGRealize(1,255,255,224)">
<input type=button value="grün" onClick="BGRealize(1,224,255,224)">
<input type=button value="türkis" onClick="BGRealize(1,224,255,255)">
<input type=button value="blau" onClick="BGRealize(1,224,224,255)">
<input type=button value="lila" onClick="BGRealize(1,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="BGRealize(1,255,192,192)">
<input type=button value="gelb" onClick="BGRealize(1,255,255,192)">
<input type=button value="grün" onClick="BGRealize(1,192,255,192)">
<input type=button value="türkis" onClick="BGRealize(1,192,255,255)">
<input type=button value="blau" onClick="BGRealize(1,192,192,255)">
<input type=button value="lila" onClick="BGRealize(1,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="BGRealize(1,255,128,128)">
<input type=button value="gelb" onClick="BGRealize(1,255,255,128)">
<input type=button value="grün" onClick="BGRealize(1,128,255,128)">
<input type=button value="türkis" onClick="BGRealize(1,128,255,255)">
<input type=button value="blau" onClick="BGRealize(1,128,128,255)">
<input type=button value="lila" onClick="BGRealize(1,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="BGRealize(1,255,0,0)">
<input type=button value="gelb" onClick="BGRealize(1,255,255,0)">
<input type=button value="grün" onClick="BGRealize(1,0,255,0)">
<input type=button value="türkis" onClick="BGRealize(1,0,255,255)">
<input type=button value="blau" onClick="BGRealize(1,0,0,255)">
<input type=button value="lila" onClick="BGRealize(1,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="BGRealize(1,192,0,0)">
<input type=button value="gelb" onClick="BGRealize(1,192,192,0)">
<input type=button value="grün" onClick="BGRealize(1,0,192,0)">
<input type=button value="türkis" onClick="BGRealize(1,0,192,192)">
<input type=button value="blau" onClick="BGRealize(1,0,0,192)">
<input type=button value="lila" onClick="BGRealize(1,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="BGRealize(1,128,0,0)">
<input type=button value="gelb" onClick="BGRealize(1,128,128,0)">
<input type=button value="grün" onClick="BGRealize(1,0,128,0)">
<input type=button value="türkis" onClick="BGRealize(1,0,128,128)">
<input type=button value="blau" onClick="BGRealize(1,0,0,128)">
<input type=button value="lila" onClick="BGRealize(1,128,0,128)">
</span></td></tr>
</form>
</table>
</td><td style="background:#000000">
<table cellpadding="5" cellspacing="1" border="0">
<form name="FGFORM">
<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:FGRealize(1,fg_red-1,fg_green,fg_blue)" style="text-decoration:none">-</a>
<a href="javascript:FGRealize(1,fg_red+1,fg_green,fg_blue)" style="text-decoration:none">+</a>
<a href="javascript:FGRealize(1,fg_red-16,fg_green,fg_blue)" style="text-decoration:none">--</a>
<a href="javascript:FGRealize(1,fg_red+16,fg_green,fg_blue)" style="text-decoration:none">++</a>
</td><td style="background:#D0F0D0">
<input name="gruen" size="4" onChange="ColorSelect()"><br>
<a href="javascript:FGRealize(1,fg_red,fg_green-1,fg_blue)" style="text-decoration:none">-</a>
<a href="javascript:FGRealize(1,fg_red,fg_green+1,fg_blue)" style="text-decoration:none">+</a>
<a href="javascript:FGRealize(1,fg_red,fg_green-16,fg_blue)" style="text-decoration:none">--</a>
<a href="javascript:FGRealize(1,fg_red,fg_green+16,fg_blue)" style="text-decoration:none">++</a>
</td><td style="background:#D0F0D0">
<input name="blau" size="4" onChange="ColorSelect()"><br>
<a href="javascript:FGRealize(1,fg_red,fg_green,fg_blue-1)" style="text-decoration:none">-</a>
<a href="javascript:FGRealize(1,fg_red,fg_green,fg_blue+1)" style="text-decoration:none">+</a>
<a href="javascript:FGRealize(1,fg_red,fg_green,fg_blue-16)" style="text-decoration:none">--</a>
<a href="javascript:FGRealize(1,fg_red,fg_green,fg_blue+16)" style="text-decoration:none">++</a>
</td><td style="background:#D0F0D0">
<input name="output" size="9" onChange="ColorSelect()" readonly><br>
<a href="javascript:FGRealize(1,fg_red-1,fg_green-1,fg_blue-1)" style="text-decoration:none">-</a>
<a href="javascript:FGRealize(1,fg_red+1,fg_green+1,fg_blue+1)" style="text-decoration:none">+</a>
<a href="javascript:FGRealize(1,fg_red-16,fg_green-16,fg_blue-16)" style="text-decoration:none">--</a>
<a href="javascript:FGRealize(1,fg_red+16,fg_green+16,fg_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="schwarzer Vordergrund" onClick="FGRealize(1,0,0,0)">
</td></tr>
<tr><td align=right colspan="4" style="background:#E0E8D0"><span style="white-space:nowrap;">
Graustufen:
<input type=button value="weiß" onClick="FGRealize(1,255,255,255)">
<input type=button value="hell" onClick="FGRealize(1,192,192,192)">
<input type=button value="mittel" onClick="FGRealize(1,128,128,128)">
<input type=button value="dunkel" onClick="FGRealize(1,64,64,64)">
<input type=button value="schwarz" onClick="FGRealize(1,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="FGRealize(1,255,224,224)">
<input type=button value="gelb" onClick="FGRealize(1,255,255,224)">
<input type=button value="grün" onClick="FGRealize(1,224,255,224)">
<input type=button value="türkis" onClick="FGRealize(1,224,255,255)">
<input type=button value="blau" onClick="FGRealize(1,224,224,255)">
<input type=button value="lila" onClick="FGRealize(1,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="FGRealize(1,255,192,192)">
<input type=button value="gelb" onClick="FGRealize(1,255,255,192)">
<input type=button value="grün" onClick="FGRealize(1,192,255,192)">
<input type=button value="türkis" onClick="FGRealize(1,192,255,255)">
<input type=button value="blau" onClick="FGRealize(1,192,192,255)">
<input type=button value="lila" onClick="FGRealize(1,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="FGRealize(1,255,128,128)">
<input type=button value="gelb" onClick="FGRealize(1,255,255,128)">
<input type=button value="grün" onClick="FGRealize(1,128,255,128)">
<input type=button value="türkis" onClick="FGRealize(1,128,255,255)">
<input type=button value="blau" onClick="FGRealize(1,128,128,255)">
<input type=button value="lila" onClick="FGRealize(1,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="FGRealize(1,255,0,0)">
<input type=button value="gelb" onClick="FGRealize(1,255,255,0)">
<input type=button value="grün" onClick="FGRealize(1,0,255,0)">
<input type=button value="türkis" onClick="FGRealize(1,0,255,255)">
<input type=button value="blau" onClick="FGRealize(1,0,0,255)">
<input type=button value="lila" onClick="FGRealize(1,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="FGRealize(1,192,0,0)">
<input type=button value="gelb" onClick="FGRealize(1,192,192,0)">
<input type=button value="grün" onClick="FGRealize(1,0,192,0)">
<input type=button value="türkis" onClick="FGRealize(1,0,192,192)">
<input type=button value="blau" onClick="FGRealize(1,0,0,192)">
<input type=button value="lila" onClick="FGRealize(1,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="FGRealize(1,128,0,0)">
<input type=button value="gelb" onClick="FGRealize(1,128,128,0)">
<input type=button value="grün" onClick="FGRealize(1,0,128,0)">
<input type=button value="türkis" onClick="FGRealize(1,0,128,128)">
<input type=button value="blau" onClick="FGRealize(1,0,0,128)">
<input type=button value="lila" onClick="FGRealize(1,128,0,128)">
</span></td></tr>
</form>
</table>
</td></tr></table>
<br><br>
Autor: <a href="../../tohome.html">Ulrich Kritzner</a>
</body>
</html>