nicht angemeldet
ColorPicker ohne JAVA
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...
-
Hi,
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");
Die Schachtelung ist so in HTML nicht zulässig. tr darf nur td und/oder th enthalten, aber keine a.
Leg das a-Element in die Zelle, nicht um die Zelle.Bei derart falschem Code kannst Du Dich nicht beschweren, wenn ein Browser da nicht mitmacht.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo!
Da hast du allerdings Recht! Ich werd das gleich mal abändern und ausprobieren.
-
-
Hello,
die Formatierung Deines Codes ist absolutes Chaos.
Könntest Du die nicht nochmal etwas lesbarer gestalten?
Harzliche Grüße aus http://www.annerschbarrich.de
Tom
--
Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
Nur selber lernen macht schlau
-
Also hier die aktualisierte und (hoffentlich) auch lesbarere Fassung:
css: #x {padding:0px; width:10px; height:10px; table-layout:fixed}
<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>
<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">
<a style="font-size:10px"
href="admin.php?c=$c&r=$r">
</a>
</td>
</tr>\n");
} else {
echo("<tr>
<td id="x"
style="background-color:#".str_pad(dechex($rr),2,"0",STR_PAD_LEFT)."0000">
<a style="font-size:10px"
href="admin.php?c=$c&r=".strtoupper(str_pad(dechex($rr),2,"0",STR_PAD_LEFT))."">
</a>
</td>
</tr>\n");
}
}
echo("</table>\n");
//------------------- grüner Farbbalken -----------------------
[...]
//------------------- 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("<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)."">
<a style="font-size:10px"
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">
</a>
</td>\n");
}
echo("</tr>\n");
}
//------------------- grüne Farbtabelle -----------------------
[...]
//--------------- 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) {
[...]
?>
</table>-
table-layout:fixed scheint nun nicht zu funktionieren...
-
Hi,
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>
<td id="x"Wie oft darf eine eindeutige id in einem Dokument vorkommen?
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"><a style="font-size:10px"
Warum arbeitest Du hier mit style-Attributen? Das bläht den Code in überflüssiger Weise auf, zentrale Formate sind besser geeignet.
Daß Du die Farbe mit dem style-Attribut setzt, ist ja noch einzusehen, aber alles, was für alle Zellen gleich ist, sollte zentral geregelt werden.href="admin.php?c=$c&r=$r">
urgs. display:block und width/height im zentralen CSS setzen, dafür die nbsps wegwerfen.
Zum Auffinden weiterer Fehler: den erzeugten HTML-Code mal durch den Validator jagen ...
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Ich benutze IDs, und keine Klassen, weil class länger ist als id, und der code 17*17+3*17=340 mal ausgegeben wird. Da lohnt es sich durchaus an jedem Byte/Zeichen zu sparen.
Die den CSS-Code habe ich jetzt überall ausgelagert, wo er mehr als 1x vorkommt ("border:2px solid #".str_pad(dechex($contrast),2,"0",STR_PAD_LEFT)."FFFF; width:6px;" wird genau zweimal ausgegeben, das ist das markierte Farbfeld).Jetzt funktioniert alles nach meinen Vorstellungen, vielen Dank an alle Tippgeber!!!
css: #x {padding:0px; width:10px; height:10px}
#a {display:block; width: 10px; height:10px; margin:0px; font-size:8px}<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>
<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">
<a id="a"
style="width:6px; height:6px; font-size:4px"
href="admin.php?c=$c&r=$r">
</a>
</td>
</tr>\n");
} else {
echo("<tr>
<td id="x"
style="background-color:#".str_pad(dechex($rr),2,"0",STR_PAD_LEFT)."0000">
<a id="a"
href="admin.php?c=$c&r=".strtoupper(str_pad(dechex($rr),2,"0",STR_PAD_LEFT))."">
</a>
</td>
</tr>\n");
}
}
echo("</table>\n");-
Hi,
Ich benutze IDs, und keine Klassen, weil class länger ist als id, und der code 17*17+3*17=340 mal ausgegeben wird. Da lohnt es sich durchaus an jedem Byte/Zeichen zu sparen.
Eine id darf aber nur höchstens einmal pro Dokument vorkommen. Egal, wieviele Zeichen im HTML-Code das kostet.
Da Du aber sowieso allen td der Tabellen die mißbrauchte id verpaßt, brauchen nur die Tabellen eine Klasse. Wenn überhaupt.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Da Du aber sowieso allen td der Tabellen die mißbrauchte id verpaßt, brauchen nur die Tabellen eine Klasse. Wenn überhaupt.
Da hast du Recht, dann kann ich alle TD-Unterelemente der Tabellenklasse formatieren. Genause bei den Links. Ich hab halt einfach den Wald vor lauter Bäumen nicht gesehen. ;-)
Nochmals vielen Dank an alle Helfer!!!!
-
-
-
-
-
-
ich hab auch schonmal einen colorpicker programmiert, der funktioniert in allen browsern... allerdings in perl
weiß nur leider nicht wo der nun rumfliegt... wenn ich ihn finde werd ich auch den source hier posten!gruß Markus