Tabellenhintergrund relativ zur aktuellen farbe ändern

Status
Nicht offen für weitere Antworten.
B

babuschka

Top Contributor
Hi,

Ich versuche mich an einer Farbtabelle in einem HTML Dokument.
Ich habe 255x255 Tabellenzellen mit jeweils einer unterschiedlichen Hintergrundfarbe.

Nun möchte ich aber, dass sich der Blauanteil (oder meinetwegen auch der Rot- oder Grünanteil) der Farbe jeder zelle durch einen klick auf einen link erhöht.

also wenn die farbe #FFFF00 ist, dann soll sie zu #FFFF01 werden.

Habe schon in ein paar Tutorials gelesen aber nichts sinnvolles gefunden. Jedes vergleichbare Beispiel in den Tutorials verändert die Farbe nur komplett also unabhängig von der aktuellen Farbe.

Bin auch eher noch ein Neuling was die sache angeht.

Hoffe ihr könnt mir helfen

pod
 
P

PoiSoN

Bekanntes Mitglied
Die Frage ist zwar schon länger her, aber ich hab grad Langeweile...:

Wenn du durch Tutorials weißt, wie man die einzelne Farbe
komplett verändern kann, dann nimm doch diese einzelne Farbe
einfach und bastel ein bißchen am String rum... wenn der letzte
Buchstabe < F ist, erhöhe ihn um 1, ansonsten nimm den
Buchstaben davor usw. usw.
Das ließe sich wunderschön in ner Schleife lösen ;)
 
I

Ilja

Bekanntes Mitglied
Code: 
newHex = incrementHex("#AF6FFF");
alert(newHex);

function incrementHex(hexWert) {
	if(hexWert.substr(0,1) == "#") hexWert = "0x"+hexWert.substr(1, hexWert.length-1);
	intWert = parseInt(hexWert, 16);
	intWert++;
	hexWert = toHexStr(intWert);
	return "#"+hexWert;
}
function toHexStr(intZahl)
{
    var s="", v;
    for (var i=5; i>=0; i--) { v = (intZahl>>>(i*4)) & 0xf; s += v.toString(16); }
    return s;
}

wenn der Wert #ffffff übergeben wird, wird #000000 zurück geliefert! aber ich denke, dass du das schon selbst abfangen kannst ;)
 
B

babuschka

Top Contributor
Ui,

hatte ich fast vergessen :oops:

Ich bin mittlerweile schon etwas weiter, soll heissen: ich habe mittlerweile herausgefunden wie man eine HEX-Farbenangabe höher bzw niedrieger setzt (hatte auch im selfhtml forum gepostet) . Habe das allerdings noch nicht für Tabellen umgesetzt sondern erstmal ein bischen mit dem Seitenhintergrund rumprobiert.
In letzter Zeit kam ich aus Zeitmangel nicht viel weiter, aber hier mal mein code:

Code: 
<html><head>
<title>Farbenbefehl</title>
<script type="text/javascript" language="JavaScript">
b = 0;
hex="0123456789ABCDEF";
blau = "a";
function mehrblau () {

  var inp;
  var out;
  if(b == 255) {b = 0} 
  else {b = (b + 1)}

  inp=parseInt(b);
  out="";
  if(isNaN(inp)) {
     alert("fehlerhafter Eingabewert");
     } else {
        while(inp != 0) {
          out=hex.charAt(inp%16)+out;
          inp=inp >> 4;
        }
      }
    blau=out; 
     {
      if ((blau >= 0) &&(blau <=9)){blau = ("0" + blau)}
      else if ((blau == "A") || (blau == "B") || (blau == "C") || (blau == "D") || (blau == "E") || (blau == "F"))
       { blau = ("0" + blau)}
     }        
     {
  var bg = document.bgColor.substr(1,7);
  var rg = bg.substr(0,4);
  document.bgColor =("#" + rg + blau);
    {
    wert = blau;
    if (wert == 0) {window.document.anzeige.wert.value = ( "#" + rg + "00");}
    else{
    window.document.anzeige.wert.value = ( "#" + rg + wert);}
    }
  }
}

function wenigerblau () {

  var inp;
  var out;
  if(b == 0) {b = 255} 
  else {b = (b - 1)}

  inp=parseInt(b);
  out="";
  if(isNaN(inp)) {
     alert("fehlerhafter Eingabewert");
     } else {
        while(inp != 0) {
          out=hex.charAt(inp%16)+out;
          inp=inp >> 4;
        }
      }
    blau=out; 
      {
       if ((blau >= 0) &&(blau <=9)){blau = ("0" + blau)}
       else if ((blau == "A") || (blau == "B") || (blau == "C") || (blau == "D") || (blau == "E") || (blau == "F"))
        { blau = ("0" + blau)}
      } 
     {
  var bg = document.bgColor.substr(1,7);
  var rg = bg.substr(0,4);
  document.bgColor =("#" + rg + blau);
    {
    wert = blau;
    if (wert == 0) {window.document.anzeige.wert.value = ( "#" + rg + "00");}
    else {
    window.document.anzeige.wert.value = ( "#" + rg + wert);}
    }
  }
}
</script></head>

<body bgColor="#000000">
<button onClick="wenigerblau ()">weniger Blau</button>
<button onClick="mehrblau ()">mehr Blau</button>

<form name="anzeige">
<input name="wert" size="7" value="#">
</form>

</body></html>

Den umrechner hab ich aus nem anderen Script zerschnipselt und eingefügt.
Muss das ganze halt nur noch so bearbeiten, dass die aktuelle Hintergrundfarbe einer Zelle erkannt wird und eine Schleife (danke für den Tip) einbauen damit jede Zelle durchlaufen wird.
Werd mal schauen wann ich mich dransetz' aber ich bin für jede weitere Hilfe Dankbar :D

MFG & THX

pod

PS: Ihr könnt mich gerne auf Unsauberkeiten, Sinnlosigkeiten und Ähnliches aufmerksam machen, bin halt (noch) kein Profi.
 
I

Ilja

Bekanntes Mitglied
ok, hier der code, wo du die farben einzeln ändern kannst und die grenzen abgefangen werden ;)

Code: 
// Paramter: HTML-Farbe, zu ändernde Farbe (R,G oder B), Incrementation (+ oder -)
newHex = changeColor("#AF6FFF", "R", "+"); 
alert(newHex); 

function changeColor(color, rgb, incr) {
   if(color.substr(0,1) == "#") color = color.substr(1, color.length-1);
   hexWertR = color.substr(0, 2);
   hexWertG = color.substr(2, 2);
   hexWertB = color.substr(4, 2);
//alert(color+"="+hexWertR+":"+hexWertG+":"+hexWertB+"  rgb="+rgb);
   if(rgb == "R") {
      intWert = parseInt(hexWertR, 16);
      eval("intWert"+incr+incr+";");
      if(intWert >= 0 && intWert <= 255) {
         hexWertR = toHexStr(intWert);
      }
   } else if(rgb == "G") {
      intWert = parseInt(hexWertG, 16);
      eval("intWert"+incr+incr+";");
      if(intWert >= 0 && intWert <= 255) {
         hexWertG = toHexStr(intWert);
      }
   } else if(rgb == "B") {
      intWert = parseInt(hexWertB, 16);
      eval("intWert"+incr+incr+";");
      if(intWert >= 0 && intWert <= 255) {
         hexWertB = toHexStr(intWert);
      }
   } else alert("Falscher 2. Parameter");
   return "#"+hexWertR+hexWertG+hexWertB; 
} 
function toHexStr(intZahl) 
{ 
    var s="", v; 
    for (var i=1; i>=0; i--) { v = (intZahl>>>(i*4)) & 0xf; s += v.toString(16); } 
    return s; 
}
 
Status
Nicht offen für weitere Antworten.

Aktuelle Jobs

Neue Themen


Oben