nicht angemeldet
Hallo!
Ich habe einen ColorPicker mit PHP programmiert. Der funktioniert auch im IE einwandfrei, im Firefox dagegen hab ich noch Probleme. Hier erstmal der Quelltext:
css: #x {padding:0px; width:10px; height:10px}
<table style="border-collapse:collapse; float:left; margin-left:1em">
<?php
//---------------------- roter Farbbalken -----------------------
for ($rr = 255; $rr >= 0; $rr = $rr-15) {
if (strtoupper(str_pad(dechex($rr),2,"0",STR_PAD_LEFT)) === "$r") {
$contrast = 255-$rr;
echo("<tr><a href="admin.php?c=$c&r=$r"><td id="x" style="border:2px solid #".str_pad(dechex($contrast),2,"0",STR_PAD_LEFT)."FFFF; width:6px; background-color:#".str_pad(dechex($rr),2,"0",STR_PAD_LEFT)."0000"></td></a></tr>\n");
} else {
echo("<tr><a href="admin.php?c=$c&r=".strtoupper(str_pad(dechex($rr),2,"0",STR_PAD_LEFT)).""><td id="x" style="background-color:#".str_pad(dechex($rr),2,"0",STR_PAD_LEFT)."0000"></td></a></tr>\n");
}
}
echo("</table>\n");
//------------------- grüner Farbbalken -----------------------
echo("<table style="border-collapse:collapse; float:left; margin-left:1em">\n");
for ($gg = 255; $gg >= 0; $gg = $gg-15) {
if (strtoupper(str_pad(dechex($gg),2,"0",STR_PAD_LEFT)) === "$g") {
$contrast = 255-$gg;
echo("<tr><a href="admin.php?c=$c&g=$g"><td id="x" style="border:2px solid #FF".str_pad(dechex($contrast),2,"0",STR_PAD_LEFT)."FF; width:6px; background-color:#00".str_pad(dechex($gg),2,"0",STR_PAD_LEFT)."00"></td></a></tr>\n");
} else {
echo("<tr><a href="admin.php?c=$c&g=".strtoupper(str_pad(dechex($gg),2,"0",STR_PAD_LEFT)).""><td id="x" style="background-color:#00".str_pad(dechex($gg),2,"0",STR_PAD_LEFT)."00"></td></a></tr>\n");
}
}
echo("</table>\n");
//------------------- blauer Farbbalken -----------------------
echo("<table style="border-collapse:collapse; float:left; margin-left:1em">\n");
for ($bb = 255; $bb >= 0; $bb = $bb-15) {
if (strtoupper(str_pad(dechex($bb),2,"0",STR_PAD_LEFT)) === "$b") {
$contrast = 255-$bb;
echo("<tr><a href="admin.php?c=$c&b=$b"><td id="x" style="border:2px solid #FFFF".str_pad(dechex($contrast),2,"0",STR_PAD_LEFT)."; width:6px; background-color:#0000".str_pad(dechex($bb),2,"0",STR_PAD_LEFT).""></td></a></tr>\n");
} else {
echo("<tr><a href="admin.php?c=$c&b=".strtoupper(str_pad(dechex($bb),2,"0",STR_PAD_LEFT)).""><td id="x" style="background-color:#0000".str_pad(dechex($bb),2,"0",STR_PAD_LEFT).""></td></a></tr>\n");
}
}
echo("</table>\n");
//------------------- rote Farbtabelle -----------------------
echo("<table style="border-collapse:collapse; float:left; margin-left:1em">\n");
if ("$r" <> "") {
$rr = "$r";
for ($gg = 255; $gg >= 0; $gg = $gg-15) {
echo("<tr>\n");
for ($bb = 0; $bb < 256; $bb = $bb+15) {
echo("<a href="admin.php?c=".strtoupper(str_pad($rr,2,"0",STR_PAD_LEFT).str_pad(dechex($gg),2,"0",STR_PAD_LEFT).str_pad(dechex($bb),2,"0",STR_PAD_LEFT))."&r=$r&g=$g&b=$b"><td id="x" style="background-color:#".str_pad($rr,2,"0",STR_PAD_LEFT).str_pad(dechex($gg),2,"0",STR_PAD_LEFT).str_pad(dechex($bb),2,"0",STR_PAD_LEFT).""></td></a>\n");
}
echo("</tr>\n");
}
//------------------- grüne Farbtabelle -----------------------
} elseif ("$g" <> "") {
$gg = "$g";
for ($rr = 255; $rr >= 0; $rr = $rr-15) {
echo("<tr>\n");
for ($bb = 0; $bb < 256; $bb = $bb+15) {
echo("<a href="admin.php?c=".strtoupper(str_pad(dechex($rr),2,"0",STR_PAD_LEFT).str_pad($gg,2,"0",STR_PAD_LEFT).str_pad(dechex($bb),2,"0",STR_PAD_LEFT))."&r=$r&g=$g&b=$b"><td id="x" style="background-color:#".str_pad(dechex($rr),2,"0",STR_PAD_LEFT).str_pad($gg,2,"0",STR_PAD_LEFT).str_pad(dechex($bb),2,"0",STR_PAD_LEFT).""></td></a>\n");
}
echo("</tr>\n");
}
//------------------- blaue Farbtabelle -----------------------
} elseif ("$b" <> "") {
$bb = "$b";
for ($rr = 255; $rr >= 0; $rr = $rr-15) {
echo("<tr>\n");
for ($gg = 0; $gg < 256; $gg = $gg+15) {
echo("<a href="admin.php?c=".strtoupper(str_pad(dechex($rr),2,"0",STR_PAD_LEFT).str_pad(dechex($gg),2,"0",STR_PAD_LEFT).str_pad($bb,2,"0",STR_PAD_LEFT))."&r=$r&g=$g&b=$b"><td id="x" style="background-color:#".str_pad(dechex($rr),2,"0",STR_PAD_LEFT).str_pad(dechex($gg),2,"0",STR_PAD_LEFT).str_pad($bb,2,"0",STR_PAD_LEFT).""></td></a>\n");
}
echo("</tr>\n");
}
//--------------- ansonsten rote Farbtabelle ------------------
} else {
$rr = "00";
for ($gg = 255; $gg >= 0; $gg = $gg-15) {
echo("<tr>\n");
for ($bb = 0; $bb < 256; $bb = $bb+15) {
echo("<a href="admin.php?c=".strtoupper(str_pad($rr,2,"0",STR_PAD_LEFT).str_pad(dechex($gg),2,"0",STR_PAD_LEFT).str_pad(dechex($bb),2,"0",STR_PAD_LEFT))."&r=$r&g=$g&b=$b"><td id="x" style="background-color:#".str_pad($rr,2,"0",STR_PAD_LEFT).str_pad(dechex($gg),2,"0",STR_PAD_LEFT).str_pad(dechex($bb),2,"0",STR_PAD_LEFT).""></td></a>\n");
}
echo("</tr>\n");
}
}
?>
</table>
Das erzeugt zwar einige KB HTML-Quellcode, aber es funktioniert clientunabhängig. Feinheiten werde ich auch noch einbauen (z.B. die Auswahlmarkierung in der Farbtabelle) Im Firefox gibt es noch ein Problem, das im IE nicht auftaucht: Die Farbzelle (das td-Element) wird nicht verweis-sensitiv, man kann sie nicht anklicken. Selbst wenn ich die Zelle mit Schrift fülle, wird sie nicht verweis-sensitiv. Dabei sind doch im a-Element ausdrücklich inline-Elemente erlaubt!?!?!
Wer weiß dafür ein Workaround?
Alternativ hab ich schon an die Möglicheit gedacht, dynamisch eine Grafik statt der Tabellen zu erzeugen und mit verweis-sensitiven Flächen (also mit shape und coords) zu arbeiten. Dann wird aber das Auswahlrechteck wahrscheinlich nicht ganz so einfach machbar, hab mich noch nicht näher mit der GD-Library beschäftigt.
P.S.: Sorry für den umfangreichen "Codeschnipsel", aber es wiederholt sich ja alles...