✔ Farbregler

kuddeldaddeldu · 24. Januar 2008

Hi,

PHP:

/* 
Äußere Schleife wird genau zwei mal durchlaufen, da ja immer zwei 
(die jeweils anderen beiden) Balken neu gefärbt werden sollen. 
*/
for( var j = 0; j < 2; j++ ) {
/*   
balken[j] ist ein Array aller div-Knoten des aktuellen Balkens. Die 
Variable elements ist eigentlich überflüssig, kann man auch direkt über
balken[j] machen.
*/ 
     elements = balken[j];  
// Schleife über alle divs des aktuellen Balkens
     for( var i = 0; i < elements.length; i++ ) {
// aktuelle Hintergrundfarbe in ein Array der RGB-Werte extrahieren
      current = elements[i].style.backgroundColor.substring(4, elements[i].style.backgroundColor.indexOf(")")).split(",");
// R-,G- oder B-Wert (je nachdem, daher die Variable rgb_i) neu setzen
      current[rgb_i] = rgb_farbarray[rgb_i];
/*
Aus dem Array wieder eine rgb(dec,dec,dec)-Farbangabe machen
und dem aktuellen div als Hintergrundfarbe verpassen 
*/
      elements[i].style.backgroundColor = "rgb(" + current.join(",") + ")";
     }
}

Nach Eingabe eines Farbcodes in das Inputfeld wäre es toll wenn sich das Farbfeld und die Balken dementsprechend verändern würden.

Dann brauchst Du einen Button, dem Du ein onclick verpasst. Wie Du an den Wert des Input-Feldes kommst, hast Du ja schon herausgefunden. Das Feld kannst Du damit einfach einfärben. Für die Balken bräuchtest Du eine Funktion, die aus der #HexHexHex-Notation ein rgb(dec,dec,dec) macht und setRGBComponent dreimal aufruft (mit 'r', 'g' und 'b').

Übrigens: ja, man kann onclick mehrere Funktionen ausführen (onclick="func1();func2();"). Man kann sich aber auch eine Funktion schreiben, die das tut und diese dann einfach onclick aufrufen...

Eine Kennzeichnung auf jedem Farbbalken, die anzeigt welche Rot-, Grün- und Blauwerte eingestellt sind.

Na, wenn Du es schaffst, die Farbe in ein Input-Feld einzutragen, ist das reine Ausgeben der RGB-Werte z.B. neben den Balken doch auch nicht mehr so schwer, oder?

LG

PS.: Ich hoffe, das sind nur Spielereien. Dafür ein HTML-Monster mit über 750 1-Pixel-Divs zu erzeugen...
Wenn Du's mal mit Schiebereglern versuchen willst, schau Dir mal dieses Beispiel an. Bräuchtest Du nur noch geeignete Grafiken.

Grille · 24. Januar 2008

Hallo,

also bei mir läuft es eigentlich sehr flüssig! Ich hoffe bei anderen auch. Bei meinem ersten versuch alle Farben als Farbtafel mit Div-Buttons (1x1Pixel groß) darzustellen, haben IE und FF aufgegeben.

Die Farbbalken haben sogar noch halbwegs gut mit Mouseover statt onClick funktioniert.

Vielen Dank nochmal für deine Erklärung, habe jetzt den Code besser verstanden (das mit den element hat mich durcheinandergebracht)

Eigentlich bin ich mit dem Ergebnis schon sehr zufrieden und will es auch so nutzen, aber dein Schieberegler ist auch interessant ... den muss ich mir mal genauer ansehen.

LG
Grille

Grille · 28. Januar 2008

hallo kuddeldaddeldu;

Ich habe die ganze Zeit weiter an diesem Projekt gearbeitet, aber ich komme nicht mehr weiter.

Die Farbwerte werden leider nich immer übernommen .. ich finde aber nicht den Fehler in den Funktionen. Wenn man für den Rotwert 00 eingibt wird der rote Farbbalken einfarbig ...

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;}
   .content_uebernehemen { width: 22px; height: 22px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; overflow: hidden; background-color: #FD5700;}
   .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>
  
  <script language="JavaScript">
   
   function HEXinDEZ(dezimalzahl){
    
    var faktor = 1;
    var wert = 0;
    var val;
   
    for(var i = dezimalzahl.length-1; i >= 0; i--){
     var char=dezimalzahl.substring(i, i+1);
     
     switch(char) {
      case "0":
       var val = 0;
       break;
      
      case "1":
       var val = 1;
       break;
      
      case "2":
       var val = 2;
       break;
       
      case "3":
       var val = 3;
       break;
       
      case "4":
       var val = 4;
       break;
       
      case "5":
       var val = 5;
       break;
       
      case "6":
       var val = 6;
       break;
       
      case "7":
       var val = 7;
       break;
       
      case "8":
       var val = 8;
       break;
       
      case "9":
       var val = 9;
       break;
       
      case "a":
       var val = 10;
       break;
       
      case "A":
       var val = 10;
       break;
       
      case "b":
       var val = 11;
       break;
       
      case "B":
       var val = 11;
       break;
       
      case "c":
       var val = 12;
       break;
       
      case "C":
       var val = 12;
       break;
       
      case "d":
       var val = 13;
       break;
      
      case "D":
       var val = 13;
       break;
       
      case "e":
       var val = 14;
       break;
      
      case "E":
       var val = 14;
       break;
       
      case "f":
       var val = 15;
       break;
       
      case "F":
       var val = 15;
       break;
       
      default:
       alert("Hexadezimalzahlen bestehen nur aus den Ziffern 0 bis F!")
     }
     wert += faktor * val;
     faktor *= 16;
    }
    return wert;
   }
   function DEZinHEX (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;
   }
   Array.prototype.findArrayIndex = function( value, strict ){
    if( typeof value == "undefined" ) {
     return "fehler";
    }
    var retVal = "fehler";
    if( strict ) {
     for( key in this ) {
      if( this[key] === value ) {
       retVal = key;
       break;
      }
     }
    } else {
     for( key in this ) {
      if( this[key] == value ) {
       retVal = key;
       break;
      }
     }
    }
    return retVal;
   }
   
   function setRGBvorgabe() {
    var eingabe = farbeingabefeld.value;
    //alert(eingabe);
    var eingabelaenge = eingabe+"A";
    var eingabelaenge = eingabelaenge.length -1;
    var eingabearray = eingabe+"A";
    var eingabearray = eingabearray.split('');
    var abfall_A = eingabearray.pop('');
    var eingabepruefung = '';
    
    var Hexsystem = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "a", "b", "c", "d", "e", "f");
    
    if(eingabelaenge != 6){
     alert("Der Farbwert muß auch 6 Zeichen bestehen. Dein Farbwert besteht aus "+eingabelaenge+" Zeichen!");
    } else {
     for(var x=0 ; x<eingabelaenge; x++){
      eingabepruefung = Hexsystem.findArrayIndex(eingabearray[x]);
      if(eingabepruefung == "fehler"){
       alert("Bei der Eingabe ist ein Fehler unterlaufen. Bitte benutze für eine Hexadezimale Zahl nur die Zeichen \"0\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"A\", \"B\", \"C\", \"D\", \"E\" und \"F\" !");
       break;
      }
     }
     if(eingabepruefung != false){
     eingabearray = eingabe+"A";
     eingabearray = eingabearray.split('');
     abfall_A = eingabearray.pop('');
     
     rot=HEXinDEZ(eingabe[0]+eingabe[1]);
     gruen=HEXinDEZ(eingabe[2]+eingabe[3]);
     blau=HEXinDEZ(eingabe[4]+eingabe[5]);
     
     var order="rgb("+rot+", "+gruen+", "+blau+")";
     //document.write("order: "+order+" <br>");
     
     setRGBComponent(order, 'rgb');
     
     }
    }
   }
   
   function setRGBComponent(farbangabedezimal, komponente) {
    
    var farbangabehex = farbangabedezimal;
    
    rgb_farbarray = farbangabedezimal.substring(4, farbangabedezimal.indexOf(")")).split(",");
    var balken = new Array();
    
    farbangabehex = DEZinHEX(rgb_farbarray[0])+DEZinHEX(rgb_farbarray[1])+DEZinHEX(rgb_farbarray[2]);
    
    document.getElementById("farbbeispiel").style.backgroundColor="#"+farbangabehex;
    document.getElementById("farbeingabefeld").value=farbangabehex;
    
    if(komponente == "rgb"){
     balken.push(document.getElementById("rotbalken").getElementsByTagName("div")); 
     balken.push(document.getElementById("gruenbalken").getElementsByTagName("div")); 
     balken.push(document.getElementById("blaubalken").getElementsByTagName("div"));
     var rgb_i = 0;
     
     for( var j = 0; j < 3; 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(",") + ")";
      }
     }
    } else {
     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" value="ABCDEF">
          
          <input type="button" value="x" class='content_uebernehemen' onClick=setRGBvorgabe()>
      </div><!-- content_main -->
  </div><!-- content_main -->
 </body>
</html>

kuddeldaddeldu · 28. Januar 2008

Hi,

schau in die Fehlerkonsole vom Firefox.

LG

✔ Farbregler

kuddeldaddeldu

Erfahrenes Mitglied

Grille

Erfahrenes Mitglied

Grille

Erfahrenes Mitglied

kuddeldaddeldu

Erfahrenes Mitglied

Neue Beiträge