nicht angemeldet
Problem bei Grafikwechsel
Hallo,
wiedermal bin ich auf Eure Hilfe angewiesen, diesmal wohl bei einem nur klitzekleinen
Problem, das mich aber schier um den Verstand bringt, weil ich den "Fehler" einfach
nicht finde.
Wahrscheinlich liegt es auch daran, dass ich vor lauter Fehlersuche den Wald vor lauter
Bäumen nicht mehr sehe.
Die Parameterübergabe klappt nun vorzüglich, besten Dank fierfür.
An dieser Stelle muß ich mich gleich mal dafür entschuldigen, dass mein Posting so lang
ausgefallen ist, aber die Seite, um die es hier geht, wird nur lokal betrieben und ich
wollte auf die Schnelle keinen Webspace "anmieten".
Mein Problem dreht sich um den Wechsel von Grafiken innerhalb einer Navigation, zum Teil
mit doppeltem Wechsel, entsprechend der nachfolgenden Skizzierung:
+----------+
| |
| | ^ |
| Nr. | | |
| V | |
+----------+
Abfolge der Grafikwechsel:
Grafik 0 (Ausgangszustand): Beide Pfeile: grau
Grafik 1 bei MouseOver: Linker Pfeil: Schwarz
Rechter Pfeil: grau
MouseOut: = Grafik 0
Grafik 2 bei OnKlick: Linker Pfeil: grün
Rechter Pfeil: grau
Grafik 3 bei MouseOver: Linker Pfeil: grün
Rechter Pfeil: schwarz
MouseOut: = Grafik 2
Grafik 4 bei OnKlick: Linker Pfeil: grau
Rechter Pfeil: grün
Grafik 5 bei MouseOver: Linker Pfeil: schwarz
Rechter Pfeil: grün
MouseOut: = Grafik 4
Diese Abfolge trifft für meine Schaltflächen "Nr.", "Titel", "Genre" und "FSK" zu,
funktioniert aber seltsamerweise nur beim Link "Nr.".
Link zur Sortierung nach der Nr.:
<a href="<?php echo $_SERVER["PHP_SELF"]; ?>?Aktion=Nach_Nr_sortieren&Richtung=<?php echo $Richtung; ?>"
onMouseOver="Nr.src='<?php echo $Nr_aktiv; ?>'"
onMouseOut="Nr.src='<?php echo $Nr_inaktiv; ?>'"
onfocus="if(this.blur)this.blur()"
onclick="this.blur();">Nr.
</a>
<img src="GRAFIKEN/NAVIGATION/0.png" width="23" height="14" border="0" name="Nr">
Link zur Sortierung nach dem Titel:
<a href="<?php echo $_SERVER["PHP_SELF"]; ?>?Aktion=Nach_Titel_sortieren&Richtung=<?php echo $Richtung; ?>"
onMouseOver="Titel.src='<?php echo $Titel_aktiv; ?>'"
onMouseOut="Titel.src='<?php echo $Titel_inaktiv; ?>'"
onfocus="if(this.blur)this.blur()"
onclick="this.blur();">Titel
</a>
<img src="GRAFIKEN/NAVIGATION/0.png" width="23" height="14" border="0" name="Titel">
Link zur Sortierung nach dem Genre:
<a href="<?php echo $_SERVER["PHP_SELF"]; ?>?Aktion=Nach_Genre_sortieren&Richtung=<?php echo $Richtung; ?>"
onMouseOver="Genre.src='<?php echo $Genre_aktiv; ?>'"
onMouseOut="Genre.src='<?php echo $Genre_inaktiv; ?>'"
onfocus="if(this.blur)this.blur()"
onclick="this.blur();">Genre
</a>
<img src="GRAFIKEN/NAVIGATION/0.png" width="23" height="14" border="0" name="Genre">
Link zur Sortierung nach der Altersfreigabe:
<a href="<?php echo $_SERVER["PHP_SELF"]; ?>?Aktion=Nach_FSK_sortieren&Richtung=<?php echo $Richtung; ?>"
onMouseOver="FSK.src='<?php echo $FSK_aktiv; ?>'"
onMouseOut="FSK.src='<?php echo $FSK_inaktiv; ?>'"
onfocus="if(this.blur)this.blur()"
onclick="this.blur();">FSK
</a>
<img src="GRAFIKEN/NAVIGATION/0.png" width="23" height="14" border="0" name="FSK">
Hier der - zur Fehlersuche leider notwendigerweise vollständige - PHP-Code:
switch ($_REQUEST['Aktion'])
{
case 'Titel_suchen':
case 'Filter_setzen':
case 'Verliehene_Filme':
case 'Hilfe':
{
$Nr_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$Nr_aktiv = "GRAFIKEN/NAVIGATION/1.png";
$Titel_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$Titel_aktiv = "GRAFIKEN/NAVIGATION/1.png";
$Genre_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$Genre_aktiv = "GRAFIKEN/NAVIGATION/1.png";
$FSK_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$FSK_aktiv = "GRAFIKEN/NAVIGATION/1.png";
break;
}
case 'Nach_Nr_sortieren':
{
$Richtung = $_REQUEST['Richtung'];
$Titel_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$Titel_aktiv = "GRAFIKEN/NAVIGATION/1.png";
$Genre_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$Genre_aktiv = "GRAFIKEN/NAVIGATION/1.png";
$FSK_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$FSK_aktiv = "GRAFIKEN/NAVIGATION/1.png";
if (! isset ($Richtung))
{
$Nr_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$Nr_aktiv = "GRAFIKEN/NAVIGATION/1.png";
}
else
{
if ($_REQUEST['Richtung']==0)
{
$Nr_inaktiv = "GRAFIKEN/NAVIGATION/2.png";
$Nr_aktiv = "GRAFIKEN/NAVIGATION/3.png";
$Richtung = 1;
}
else
{
$Nr_inaktiv = "GRAFIKEN/NAVIGATION/4.png";
$Nr_aktiv = "GRAFIKEN/NAVIGATION/5.png";
$Richtung = 0;
}
}
break;
}
case 'Nach_Titel_sortieren':
{
$Richtung = $_REQUEST['Richtung'];
$Nr_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$Nr_aktiv = "GRAFIKEN/NAVIGATION/1.png";
$Genre_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$Genre_aktiv = "GRAFIKEN/NAVIGATION/1.png";
$FSK_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$FSK_aktiv = "GRAFIKEN/NAVIGATION/1.png";
if (! isset ($Richtung))
{
$Titel_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$Titel_aktiv = "GRAFIKEN/NAVIGATION/1.png";
}
else
{
if ($_REQUEST['Richtung']==0)
{
$Titel_inaktiv = "GRAFIKEN/NAVIGATION/2.png";
$Titel_aktiv = "GRAFIKEN/NAVIGATION/3.png";
$Richtung = 1;
}
else
{
$Titel_inaktiv = "GRAFIKEN/NAVIGATION/4.png";
$Titel_aktiv = "GRAFIKEN/NAVIGATION/5.png";
$Richtung = 0;
}
}
break;
}
case 'Nach_Genre_sortieren':
{
$Richtung = $_REQUEST['Richtung'];
$Nr_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$Nr_aktiv = "GRAFIKEN/NAVIGATION/1.png";
$Titel_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$Titel_aktiv = "GRAFIKEN/NAVIGATION/1.png";
$FSK_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$FSK_aktiv = "GRAFIKEN/NAVIGATION/1.png";
if (! isset ($Richtung))
{
$Genre_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$Genre_aktiv = "GRAFIKEN/NAVIGATION/1.png";
}
else
{
if ($_REQUEST['Richtung']==0)
{
$Genre_inaktiv = "GRAFIKEN/NAVIGATION/2.png";
$Genre_aktiv = "GRAFIKEN/NAVIGATION/3.png";
$Richtung = 1;
}
else
{
$Genre_inaktiv = "GRAFIKEN/NAVIGATION/4.png";
$Genre_aktiv = "GRAFIKEN/NAVIGATION/5.png";
$Richtung = 0;
}
}
break;
}
case 'Nach_FSK_sortieren':
{
$Richtung = $_REQUEST['Richtung'];
$Nr_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$Nr_aktiv = "GRAFIKEN/NAVIGATION/1.png";
$Titel_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$Titel_aktiv = "GRAFIKEN/NAVIGATION/1.png";
$Genre_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$Genre_aktiv = "GRAFIKEN/NAVIGATION/1.png";
if (! isset ($Richtung))
{
$FSK_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$FSK_aktiv = "GRAFIKEN/NAVIGATION/1.png";
}
else
{
if ($_REQUEST['Richtung']==0)
{
$FSK_inaktiv = "GRAFIKEN/NAVIGATION/2.png";
$FSK_aktiv = "GRAFIKEN/NAVIGATION/3.png";
$Richtung = 1;
}
else
{
$FSK_inaktiv = "GRAFIKEN/NAVIGATION/4.png";
$FSK_aktiv = "GRAFIKEN/NAVIGATION/5.png";
$Richtung = 0;
}
}
break;
}
default:
{
$Nr_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$Nr_aktiv = "GRAFIKEN/NAVIGATION/1.png";
$Titel_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$Titel_aktiv = "GRAFIKEN/NAVIGATION/1.png";
$Genre_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$Genre_aktiv = "GRAFIKEN/NAVIGATION/1.png";
$FSK_inaktiv = "GRAFIKEN/NAVIGATION/0.png";
$FSK_aktiv = "GRAFIKEN/NAVIGATION/1.png";
$Richtung = 0;
}
}
Ich hoffe sehr, dass Ihr mir bei der Lösungsfindung helfen könnt.
Optimierungsvorschläge zur Reduzierung des Code-Umfangs sind ebenfalls gern gesehen.
Gruß
Enrico
-
Hi!
Es ist spät und ich hab jetzt keine Lust mehr, auf Fehlersuche zu gehen, zumal ich nicht einmal weiß, was "funktioniert nicht" heißt.
Gibt es eine Fehlermeldung? Wenn ja, welche?
Ich wollte jedenfalls nur mal schnell auf ein paar Fehler aufmerksam machen, die mir beim Überfliegen des Codes ins Auge gesprungen sind.<a href="<?php echo $_SERVER["PHP_SELF"]; ?>?Aktion=Nach_Nr_sortieren&Richtung=<?php echo $Richtung; ?>"
onMouseOver="Nr.src='<?php echo $Nr_aktiv; ?>'"
onMouseOut="Nr.src='<?php echo $Nr_inaktiv; ?>'"
onfocus="if(this.blur)this.blur()"
onclick="this.blur();">Nr.
</a>Das & muß in HTML maskiert werden.
Falsch: ?Aktion=Nach_Nr_sortieren&Richtung=
Richtig: ?Aktion=Nach_Nr_sortieren&Richtung=Das Spielchen mit den Eventhandlern onfocus/onclick soll scheinbar verhindern, daß dieses kleine gepunktete Kästchen um die Links gezeigt wird.
Warum? Was stört dich daran?
Laß diese Spielereien. Dadurch ist es unmöglich, ohne Maus zu arbeiten. Man kann die Links nicht mehr mit der Tastatur anwählen, weil du den Focus sofort entfernst.<img src="GRAFIKEN/NAVIGATION/0.png" width="23" height="14" border="0" name="Nr">
Das Image-Element erfordert zwingend ein alt-Attribut. Du kannst es leer lassen, darfst es aber nicht weglassen, wenn du validen Code haben willst.
Schöner Gruß,
rob-
Hallo rob,
danke für Deine Antwort, ich werde Deine Ratschläge bei nächster Gelegenheit
umsetzen, vielleicht liegt ja darin die Fehlerquelle begründet.Gruß
EnricoL
-
-
Tach.
Mein Problem dreht sich um den Wechsel von Grafiken innerhalb einer Navigation, zum Teil mit doppeltem Wechsel, entsprechend der nachfolgenden Skizzierung:
Ich fasse das mal so zusammen wie ich es verstanden habe. Korrigiere mich notfalls!
-
Durch Klick auf einen Link wird die Sortierung von Datensätzen umgeschaltet.
-
Die aktuelle Sortierreihenfolge (aufsteigend, absteigend) wird durch einen grünen Pfeil in die jeweilige Richtung angezeigt. Der jeweils andere Pfeil ist grau.
-
Beim Überfahren mit der Maus soll der Pfeil, der die durch Klick zu erreichende Sortierung angibt, schwarz erscheinen.
-
Beim ersten Aufruf der Seite ist keine Sortierreihenfolge vorgegeben. Beide Pfeile sind demzufolge grau.
Ich hoffe sehr, dass Ihr mir bei der Lösungsfindung helfen könnt.
Anstatt jetzt das Problem in Deinem etwas umständlichen Quelltext zu suchen, biete ich gleich mal eine kürzere Alternative an. :)
Der Übersichtlichkeit halber nehme ich die graphische Formatierung aus PHP heraus und regle sie statt dessen über CSS.
HTML:
<ul> <li><a href="?aktion=nach_nr_sortieren">Nr.</a></li> <li><a href="?aktion=nach_titel_sortieren">Titel</a></li> ... </ul>CSS:
ul li { background: #eee url(0.png) no-repeat left center; padding-left: 20px; /* Text rechts neben das Hintergrundbild schieben */ } ul li:hover { background-image: url(1.png); }Damit sind bereits Deine beiden ersten Zustände abgedeckt. Um nun die restlichen Fälle nach Klick eines Links zu erfassen, läßt Du PHP neben der Sortierung Deiner Datensätze in Abhängigkeit von
$richtungnoch jeweils eine entsprechende Klasse in den HTML-Code einfügen, die dann den Angriffspunkt fürs CSS liefert. Ich nenne sie "ordered-asc" und "ordered-desc".Nach dem ersten Klick auf Nr. sähe das so aus:
<ul> <li class="ordered-desc"><a href="?aktion=nach_nr_sortieren">Nr.</a></li> <li><a href="?aktion=nach_titel_sortieren">Titel</a></li> ... </ul>Nach dem zweiten Klick dann so:
<ul> <li class="ordered-asc"><a href="?aktion=nach_nr_sortieren">Nr.</a></li> <li><a href="?aktion=nach_titel_sortieren">Titel</a></li> ... </ul>Fehlt nur noch das zusätzliche CSS für diese Fälle ...
ul li.ordered-desc { background-image: url(2.png); } ul li.ordered-desc:hover { background-image: url(3.png); } ul li.ordered-asc { background-image: url(4.png); } ul li.ordered-asc:hover { background-image: url(5.png); }... und das war's soweit.
--
Once is a mistake, twice is Jazz.
-