Farbregler

Grille

Erfahrenes Mitglied
Hallo ...

Ich möchte versuchen einen Farbregler in Javascript umzusetzen und habe diesen Code schon fertig (es werden die drei Frabregler horizontal aufgebaut):

PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
 <head>
  <title>Farbtabelle mit JavaScript</title>
  <style type="text/css">
   .content_11054_colorecke { width: 1px; height: 10px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden;}
   .neben {float: left;}
   .umbruch {display: block;}
  </style>
 
 
  <script language="JavaScript">
   function Hex(Num) {
    var Ziffern = '0123456789abcdef';
    return Ziffern.charAt((Num & 240) >> 4) + Ziffern.charAt(Num & 15);
   }
 
   function regler(){
    var rotfarbe = 0;
    var gruenfarbe = 0;
    var blaufarbe = 0;
    var stufen=256;
    for( r=0; r<stufen; r++ ){
     document.write( "<div class='content_11054_colorecke neben' style='background-color: #" + Hex(r) + Hex(gruenfarbe) + Hex(blaufarbe) + ";'>&nbsp;</div><!-- content_11054_colorecke -->" );
    }
    document.write( "<div class='umbruch'>&nbsp;</div><!-- umbruch -->" );
    for( g=0; g<stufen; g++ ){
     document.write( "<div class='content_11054_colorecke neben' style='background-color: #" + Hex(rotfarbe) + Hex(g) + Hex(blaufarbe) + ";'>&nbsp;</div><!-- content_11054_colorecke -->" );
    }
    document.write( "<div class='umbruch'>&nbsp;</div><!-- umbruch -->" );
    for( b=0; b<stufen; b++ ){
     document.write( "<div class='content_11054_colorecke neben' style='background-color: #" + Hex(rotfarbe) + Hex(gruenfarbe) + Hex(b) + ";'>&nbsp;</div><!-- content_11054_colorecke -->" );
    }
   }
  </script>
 </head>
 
 <body>
  <script language="JavaScript">
  <!--
  regler();
  // -->
  </script>
 </body>
</html>

Ich habe leider keinerlei Ahnung von Javascript, ... bitte daher um einfache Antworten.

Ich möchte nun mit der Maus auf eine Position eines Balken klicken ... an dieser stelle soll sich der Balken Weiß färben. dann soll der Farbwert dieses Balken übernommen werden und auf die anderen Balken (in Echtzeit) übertragen werden.

Also ich klicke auf den Roten Balken in der Mitte, der Rotwert sollte dort um 128 liegen, und die Variable sollte dann diesem Rotwert entsprechen (128) ... der grüne und der blaue Balken sollen sich dann neu aufbauen mit dem der Variable "rotfarbe = 128" (und nicht mehr 0)

Wie kann ich auf die div-Flächen klicken und dann eine Variable so verändern?
Wie kann ich die Div-Kiste dann Weiß färben?

Bin für jeden Tip Dankbar ...

Gruß,
Grille
 
Hallo,

Ich habe weitergearbeitet und kann jetzt der Funktion Farbwerte für Rot, Grün und Blau übergeben. Leider habe ich es aber noch nicht geschafft ihm zu sagen, dass, wenn auf einen dieser DIV-Felder geklickt wird, der neue Farbwert übergeben wird.

Hier der Stand der Dinge:

PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
 <head>
  <title>Farbtabelle mit JavaScript</title>
  <style type="text/css">
   .content_11054_colorecke { width: 4px; height: 10px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden;}
   .neben {float: left;}
   .umbruch {display: block;}
  </style>
 
 
  <script language="JavaScript">
   function Hex(Num) {
    var Ziffern = '0123456789abcdef';
    return Ziffern.charAt((Num & 240) >> 4) + Ziffern.charAt(Num & 15);
   }
 
   function farbregler(rotfarborder,gruenfarborder,blaufarborder){
 
    this.rot = 0;
    this.gruen = 0;
    this.blau = 0;
 
    this.rotfarbuebergabe = rotfarborder;
    this.gruenfarbuebergabe = gruenfarborder;
    this.blaufarbuebergabe = blaufarborder;
    this.stufen = 256;
 
 
    for( rot ; rot < stufen; rot++ ){
     document.write( "<div class='content_11054_colorecke neben' onClick='this.rotfarbuebergabe="+rot+"' style='background-color: #" + Hex(rot) + Hex(gruenfarbuebergabe) + Hex(blaufarbuebergabe) + ";'>&nbsp;</div><!-- content_11054_colorecke -->" );
    }
    document.write( "<div class='umbruch'>&nbsp;</div><!-- umbruch -->" );
    for( gruen; gruen<stufen; gruen++ ){
     document.write( "<div class='content_11054_colorecke neben' onClick='this.gruenfarbuebergabe="+gruen+"' style='background-color: #" + Hex(rotfarbuebergabe) + Hex(gruen) + Hex(blaufarbuebergabe) + ";'>&nbsp;</div><!-- content_11054_colorecke -->" );
    }
    document.write( "<div class='umbruch'>&nbsp;</div><!-- umbruch -->" );
    for( blau; blau<stufen; blau++ ){
     document.write( "<div class='content_11054_colorecke neben' onClick='this.blaufarbuebergabe="+blau+"' style='background-color: #" + Hex(rotfarbuebergabe) + Hex(gruenfarbuebergabe) + Hex(blau) + ";'>&nbsp;</div><!-- content_11054_colorecke -->" );
    }
   }
  </script>
 </head>
 
 <body>
  <script language="JavaScript">
  <!--
   farbregler(0,0,0);
  // -->
  </script>
 </body>
</html>

könnt Ihr mir bitte helfen? Es muss irgend ein Fehler mit diesem "onClick" sein:

PHP:
"<div class='content_11054_colorecke neben' onClick='this.rotfarbuebergabe="+rot+"' style='background-color: #" + Hex(rot) + Hex(gruenfarbuebergabe) + Hex(blaufarbuebergabe) + ";'>&nbsp;</div><!-- content_11054_colorecke -->"


// EDIT

Wenn ich das mit dem "onClick" so mache, verschwinden die 3 Farbbalken

PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
 <head>
  <title>Farbtabelle mit JavaScript</title>
  <style type="text/css">
   .content_11054_colorecke { width: 4px; height: 10px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden;}
   .neben {float: left;}
   .umbruch {display: block;}
  </style>
  
 
  <script language="JavaScript">
   function Hex(Num) {
    var Ziffern = '0123456789abcdef';
    return Ziffern.charAt((Num & 240) >> 4) + Ziffern.charAt(Num & 15);
   }
   
   
   function farbregler(rotfarborder,gruenfarborder,blaufarborder){
    
    this.rot = 0;
    this.gruen = 0;
    this.blau = 0;
    
    if(rotfarborder){
     this.rotfarbuebergabe = rotfarborder;
    }
    
    if(gruenfarborder){
     this.gruenfarbuebergabe = gruenfarborder;
    }
    
    if(blaufarborder){
     this.blaufarbuebergabe = blaufarborder;
    }
    
    this.stufen = 256;
    
    
    for( this.rot ; this.rot < stufen; this.rot++ ){
     document.write( "<div class='content_11054_colorecke neben' onClick='farbregler(rotfarborder=150)' style='background-color: #" + Hex(this.rot) + Hex(this.gruenfarbuebergabe) + Hex(this.blaufarbuebergabe) + ";'></div><!-- content_11054_colorecke -->" );
    }
    document.write( "<div class='umbruch'>&nbsp;</div><!-- umbruch -->" );
    for( this.gruen; this.gruen<stufen; this.gruen++ ){
     document.write( "<div class='content_11054_colorecke neben' onClick='farbregler(gruenfarborder=150)' style='background-color: #" + Hex(this.rotfarbuebergabe) + Hex(this.gruen) + Hex(this.blaufarbuebergabe) + ";'></div><!-- content_11054_colorecke -->" );
    }
    document.write( "<div class='umbruch'>&nbsp;</div><!-- umbruch -->" );
    for( this.blau; this.blau<stufen; this.blau++ ){
     document.write( "<div class='content_11054_colorecke neben' onClick='farbregler(blaufarborder=150)' style='background-color: #" + Hex(this.rotfarbuebergabe) + Hex(this.gruenfarbuebergabe) + Hex(this.blau) + ";'></div><!-- content_11054_colorecke -->" );
    }
   }
  </script>
 </head>
 
 <body>
  <script language="JavaScript">
  <!--
   farbregler();
  // -->
  </script>
 </body>
</html>

Kann mir keiner sagen, wie ich mit "onClick" die Variable "rotfarbuebergabe" verändern kann?
 
Hi,

also erstmal würde ich das nicht mit document.write machen. Du musst doch nicht immer das ganze Dokument neu aufbauen. Wenn Du Firefox benutzt, wird die Fehlerkonsole Dir außerdem einiges mitzuteilen haben. ;)
Setze die Balken mal jeweils in ein Div mit einer id, damit Du darauf zugreifen kannst. Dann rufst Du onclick eine Funktion auf, der Du die Farbe des geklickten Divs übergibst (this.style.backgroundColor) und in welchem Balken das war (z.B. "r"). Die Funktion extrahiert dann die Komponente aus dem RGB-Wert, durchläuft je nach geklicktem Balken die beiden jeweils anderen und ersetzt dort die Farbkomponente.

So ungefähr:

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
 <head>
  <title>Farbtabelle mit JavaScript</title>
  <style type="text/css">
   .content_11054_colorecke { width: 1px; height: 10px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden;}
   .neben {float: left;}
   .umbruch {display: block; clear: left; padding: 5px 5px 5px 5px;}
  </style>
 
 
  <script language="JavaScript">
   function Hex(Num) {
    var Ziffern = '0123456789abcdef';
    return Ziffern.charAt((Num & 240) >> 4) + Ziffern.charAt(Num & 15);
}
 
 function setRGBComponent(farbangabe, komponente) {
    rgb_array = farbangabe.substring(4, farbangabe.indexOf(")")).split(",");
    var balken = new Array();
    switch(komponente) {
       case "r":
             balken.push(document.getElementById("gruen").getElementsByTagName("div")); 
balken.push(document.getElementById("blau").getElementsByTagName("div"));
	     var rgb_i = 0;
             break;
       case "g":
	     balken.push(document.getElementById("rot").getElementsByTagName("div")); 
balken.push(document.getElementById("blau").getElementsByTagName("div"));
             var rgb_i = 1;
            break;
       case "b":
	     balken.push(document.getElementById("rot").getElementsByTagName("div")); 
balken.push(document.getElementById("gruen").getElementsByTagName("div"));
             var rgb_i = 2;
            break;
    }
    
    for( var j = 0; j < 2; j++ ) { 
       elements = balken[j];   
       for( var i = 0; i < elements.length; i++ ) {
         current = elements[i].style.backgroundColor.substring(4, elements[i].style.backgroundColor.indexOf(")")).split(",");
         current[rgb_i] = rgb_array[rgb_i];
         elements[i].style.backgroundColor = "rgb(" + current.join(",") + ")";
       }
    }
 }
 
   function regler(){
    var rotfarbe = 0;
    var gruenfarbe = 0;
    var blaufarbe = 0;
    var stufen=256;
 document.write( "<div class='umbruch' id='rot'>" );
    for( r=0; r<stufen; r++ ){
     document.write( "<div class='content_11054_colorecke neben' style='background-color: #" + Hex(r) + Hex(gruenfarbe) + Hex(blaufarbe) + ";' onclick='setRGBComponent(this.style.backgroundColor, \"r\");'>&nbsp;</div><!-- content_11054_colorecke -->" );
}
    document.write( "</div><!-- umbruch -->" );
    document.write( "<div class='umbruch' id='gruen'>" );
    for( g=0; g<stufen; g++ ){
       document.write( "<div class='content_11054_colorecke neben' style='background-color: #" + Hex(rotfarbe) + Hex(g) + Hex(blaufarbe) + ";' onclick='setRGBComponent(this.style.backgroundColor, \"g\");'>&nbsp;</div><!-- content_11054_colorecke -->" );
}
    document.write( "</div><!-- umbruch -->" );
    document.write( "<div class='umbruch' id='blau'>" );
    for( b=0; b<stufen; b++ ){
       document.write( "<div class='content_11054_colorecke neben' style='background-color: #" + Hex(rotfarbe) + Hex(gruenfarbe) + Hex(b) + ";' onclick='setRGBComponent(this.style.backgroundColor, \"b\");'>&nbsp;</div><!-- content_11054_colorecke -->" );
}
    document.write( "</div><!-- umbruch -->" );
}
  </script>
 </head>
 
 <body>
  <script language="JavaScript">
  <!--
  regler();
  // -->
  </script>
 </body>
</html>

Hattest Du das so gemeint?

LG
 
VIIIIEEEELen DANK

es funktioniert! Ich muss aber erstmal genau erforschen und durchforsten wie das funktioniert was du da gemacht hast.

ich schau mir meine Arbeiten immer gleichzeitig in IE und FF an. Da war noch nichts von einem Fehler zu sehen.

nochmals 1000 Dank!

Als nächstes möchte ich versuchen diese Farbe auf einem Farbfeld zu übertragen und den Farbwert als Text auszugeben, sowie die ausgewählte DIV-Box mit einem weißen Rahmen zu kennzeichen.

Ich muss mich sicher nochmal melden wenn ich nicht weiterkomme .. VIELEN DANK!

// EDIT

Leider funktionert es nicht im IE ..
er baut die drei Balken auf, wenn man aber auf die Balken klickt kommt in der Statuszeile: "Fehler auf der Seite" ...
 
Hi,

ich schau mir meine Arbeiten immer gleichzeitig in IE und FF an. Da war noch nichts von einem Fehler zu sehen.

Im IE ist das meist ausgeschaltet, weil nervig und die Meldungen sind auch oft nichtssagend. Im FF musst Du schon die Fehlerkonsole öffnen (zu finden unter "Extras"). Für FF gibt's außerdem noch ein nützliches Plugin namens "Firebug". Probier's mal aus. ;)



Sch*** IE... Konnte man da nicht mit 'nem Doppelklick die Meldung bekommen? Versuch's mal...
 
da ist eine Fehlermeldung wenn man im IE rumklickt:

Zeile: 47
Zeichen: 7
Fehler: Ungültiger Eigenschaftswert

Das ist diese Zeile bei mir und Zeichen 7 ist das "e" am Zeilenanfang:

PHP:
elements[i].style.backgroundColor = "rgb(" + current.join(",") + ")";
 
Hi,

schreib mal Deine regler()-Funktion so um, dass sie die Farben nicht als Hexwerte einträgt, sondern als rgb(dec,dec,dec)-Notation. Firefox setzt das wohl automatisch um, IE anscheinend nicht.

Beispiel:

HTML:
document.write( "<div class='content_11054_colorecke neben' style='background-color: rgb(" + r + "," + gruenfarbe + "," + blaufarbe + ");' onclick='setRGBComponent(this.style.backgroundColor, \"r\");'>&nbsp;</div><!-- content_11054_colorecke -->" );

Die Hex-Funktion kannst Du dann einstampfen.

LG
 
ist es eigentlich möglich mehrere Anweisungen pro onClick zu übergeben ... also: Farbwert übergeben ... dann noch eine Markierung in der Position verschieben?

Was könnte der Bessere Weg sein um die ausgewählte Farbposition auf dem Farbschieber zu markieren? :

1) auf die DIV-Box klicken und diese dann mit einem weißen Rahmen versehen; wenn eine neue Position angeklickt wird, wird der Rahmen wieder entfernt und der weiße Rahmen um die neue DIV-Box gelegt.

2) Wenn der Farbwert angeklickt wurde (zB. ROT=56), wird auf diesem Farbregler die DIV-Box herausgesuch und dann mit einem weißen Rahmen versehen. Vorraussetzung ist dann natürlich, dass man den Farbwert der DIV-Boxen aulesen lassen kann und danach suchen kann.

3) Wenn man mit der Maus auf den Farbstreifen geklickt hat, wird an diese Position einfach eine Grafik (Zeiger) verschoben.

4) Wenn der Farbwert 134 ist, wird eine Grafik um 134pixel x DIV-Boxbreite verschoben. ( Das Problem ist, in Flash wüste ich, wie ich auf ein Zeigerobjekt welchen CODE schreiben muß, damit der Zeiger sich bewegt. Aber wie schreibt man einen solchen CODE auf ein IMG mit hilfe von JS?)
 
Hallo ... ich bin es nochmal,

Mein Farbreglerproblem ist scheinbar gelöst. Leider verstehe ich eine Stelle vom CODE nicht, den kuddeldaddeldu mir zum größten Teil geschrieben hat. kuddeldaddeldu, kannst Du mir vielleicht grob umschreiben was mit dieser und in dieser for-Schleife gemacht wird?

PHP:
for( var j = 0; j < 2; j++ ) { 
     elements = balken[j];   
     for( var i = 0; i < elements.length; i++ ) {
      current = elements[i].style.backgroundColor.substring(4, elements[i].style.backgroundColor.indexOf(")")).split(",");
      current[rgb_i] = rgb_farbarray[rgb_i];
      elements[i].style.backgroundColor = "rgb(" + current.join(",") + ")";
     }
}

Der ganze CODE sieht (bei mir) so aus ... man kann auf die Balken klicken, und man sieht die eingestellte Farbe sowie den Farbcode als Hexadezimalwert in einem Eingabefeld:

PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
 <head>
  <title>Farbregler mit JavaScript</title>
  <style type="text/css">
   .content_main { width: 600px; margin: 0px 0px 0px 0px; padding: 0; overflow: hidden; background-color: #fff;}
   .content_farbreglerbox { width: 294px; height: 80px; margin: 0px 0px 0px 0px; padding: 10px 0px 0px 15px; overflow: hidden; background-image:url(farbregler_background.png);}
   .content_farbbeispielbox { width: 80px; height: 80px; margin: 0px 0px 0px 0px; padding: 20px 0px 0px 15px; overflow: hidden; }
   .content_colorbasicbox { width: 1px; height: 10px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden;}
   .content_beispielbox { width: 50px; height: 50px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden; background-color: #000000;}
   .content_balken {display: block; clear: left; padding: 10px 10px 10px 10px; margin: 0px 0px 0px 0px;}
   .neben {float: left;}
   .input_farbwert {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12pt; font-weight:normal; color:#222; border: 1px solid #FD5700; width: 80px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 24px;}
   .content_headline {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:10pt; font-style:normal; color:#000; font-weight:bold;text-decoration:none; line-height: 12pt;}
   .content_text {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:10pt; font-style:normal; color:#000; font-weight:normal; text-decoration:none; line-height: 12pt;}
  </style>
  <!--background-image:url(farbregler_background.png);-->
 
  <script language="JavaScript">
 
   function hex (dezimalzahl) {
    max = 255;
    if (dezimalzahl > max)
     return "null";
    if (dezimalzahl <= -1)
     return  "null";
    var z = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9","A", "B", "C", "D", "E", "F");
    var ergebnis = "";
    if (dezimalzahl == 0)
     return "00";
    var i = 1, v = dezimalzahl, r = 0;
    while (v > 15) {
     v = Math.floor(v / 16);
     i++;
    }
    v = dezimalzahl;
    for (j=i; j >= 1; j--) {
     ergebnis = ergebnis + z[Math.floor(v / Math.pow(16,j-1))];
     v = v - (Math.floor(v / Math.pow(16,j-1)) * Math.pow(16,j-1));
    }
    if (dezimalzahl <= 15)
     ergebnis = "0" + ergebnis;
 
    return ergebnis;
   }
 
   function setRGBComponent(farbangabedezimal, komponente) {
 
    var farbangabehex = farbangabedezimal;
 
    rgb_farbarray = farbangabedezimal.substring(4, farbangabedezimal.indexOf(")")).split(",");
    var balken = new Array();
 
    farbangabehex = hex(rgb_farbarray[0])+hex(rgb_farbarray[1])+hex(rgb_farbarray[2]);
 
    document.getElementById("farbbeispiel").style.backgroundColor="#"+farbangabehex;
    document.getElementById("farbeingabefeld").value=farbangabehex;
 
    switch(komponente) {
     case "r":
      balken.push(document.getElementById("gruenbalken").getElementsByTagName("div")); 
      balken.push(document.getElementById("blaubalken").getElementsByTagName("div"));
      var rgb_i = 0;
      break;
 
     case "g":
      balken.push(document.getElementById("rotbalken").getElementsByTagName("div")); 
      balken.push(document.getElementById("blaubalken").getElementsByTagName("div"));
      var rgb_i = 1;
      break;
 
     case "b":
      balken.push(document.getElementById("rotbalken").getElementsByTagName("div")); 
      balken.push(document.getElementById("gruenbalken").getElementsByTagName("div"));
      var rgb_i = 2;
      break;
    }
 
    for( var j = 0; j < 2; j++ ) { 
     elements = balken[j];   
     for( var i = 0; i < elements.length; i++ ) {
      current = elements[i].style.backgroundColor.substring(4, elements[i].style.backgroundColor.indexOf(")")).split(",");
      current[rgb_i] = rgb_farbarray[rgb_i];
      elements[i].style.backgroundColor = "rgb(" + current.join(",") + ")";
     }
    }
   }
 
   function farbregler(){
    var rotfarborder = 0;
    var gruenfarborder = 0;
    var blaufarborder = 0;
 
    var stufen=256;
 
 
    document.write( "<div class='content_balken' id='rotbalken'>" );
    for( rot=0; rot<stufen; rot++ ){
     document.write( "<div class='content_colorbasicbox neben' style='background-color: rgb(" + rot + "," + gruenfarborder + "," + blaufarborder + ");' onClick='setRGBComponent(this.style.backgroundColor, \"r\");'/></div><!-- content_11054_colorbasicbox -->" );
    }
    document.write( "</div><!-- content_balken -->" );
 
 
    document.write( "<div class='content_balken' id='gruenbalken'>" );
    for( gruen=0; gruen<stufen; gruen++ ){
     document.write( "<div class='content_colorbasicbox neben' style='background-color: rgb(" + rotfarborder + "," + gruen + "," + blaufarborder + ");' onClick='setRGBComponent(this.style.backgroundColor, \"g\");'/></div><!-- content_11054_colorbasicbox -->" );
    }
    document.write( "</div><!-- content_balken -->" );
 
 
    document.write( "<div class='content_balken' id='blaubalken'>" );
    for( blau=0; blau<stufen; blau++ ){
     document.write( "<div class='content_colorbasicbox neben' style='background-color: rgb(" + rotfarborder + "," + gruenfarborder + "," + blau + ");' onClick='setRGBComponent(this.style.backgroundColor, \"b\");'/></div><!-- content_11054_colorbasicbox -->" );
    }
    document.write( "</div><!-- content_balken -->" );
 
   }
  </script>
 </head>
 
 <body>
  <div class='content_main'>
   <span class='content_headline'>Farbeinstellung:</span><br>
   <span class='content_text'>Um Deine Wunschfarbe zu finden, klicke auf die drei Farbbalken um die Farbwerte für Rot, Grün und Blau zu erhöhen oder zu verringern, oder klick einfach die Farbe an, die Dir am besten gefällt. Du kannst natürlich auch den Farbcode als Hexadezimalwert direkt angeben.</span>
   <div class='content_main'>
    <div class='content_farbreglerbox neben' >
     <script language="JavaScript">
      <!--
       farbregler();
      // -->
     </script>
    </div><!-- content_farbreglerbox -->
    <div class='content_farbbeispielbox' >
     <div class='content_beispielbox' id='farbbeispiel'/></div><!-- content_11054_beispielbox -->
    </div><!-- content_farbbeispielbox -->
    <input id='farbeingabefeld' class="input_farbwert" type="text" name="accound_bildzahl" id="form_feld" value="###11054###"><br>
    </div><!-- content_main_rightbox -->
   </div><!-- content_main -->
  </div><!-- content_main -->
 </body>
</html>

Im Angang befindet sich noch die HTML mit einer Hintergrundgrafik. Die Grafik ist im Hintergrund der Farbbalken und zeigt wieviel Prozent Rot, Grün und Blau sich wo auf den Farbbalken befinden.

Wünsche die noch offen sind:
+ Nach Eingabe eines Farbcodes in das Inputfeld wäre es toll wenn sich das Farbfeld und die Balken dementsprechend verändern würden.
+ Eine Kennzeichnung auf jedem Farbbalken, die anzeigt welche Rot-, Grün- und Blauwerte eingestellt sind.

nochmals TAUSEND DANK an kuddeldaddeldu
 

Anhänge

  • farbbalken.zip
    6,7 KB · Aufrufe: 31
Zurück