Problem bei Grafikwechsel

[Blaubart]

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 $richtung noch 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.