Verschiedene Button-Zustände mit Javascript?

[Superhonko]

Moin moin!

Ich möchte mit Javascript (von mir aus auch mit was anderem) nicht nur den normalen Rollover-Effekt erzielen, sondern auch einen Zustand für "Visited" und einen für "Activ" machen.
CSS hat ja für normale Links solche Befehle, aber ich bräuchte das für Button-Grafiken...

Hat da einer eine Idee? Javascript-Erfahrung ist leider so gut wie gar nicht vorhanden... :-(

Grüße,
DJ

 

[Sven Mintel]

Das mit "visited" wird wohl nicht gehen

Wenn du mit "active" meinst, dass beim Buttonclick eine Seite aufgerufen wird, und der Button hervorgehoben werden soll, falls man sich auf der Seite befindet, welche er zum Ziel hat...

dann könntest du bei allen betreffenden Buttons die Seite ermitteln, welche ihr Ziel ist..und mit der aktuellen URL des Dokumentes vergleichen...sind sie identisch....mach ihn"active".

Wenn die Buttons jedoch nur zum Aufruf von Seiten gedacht sind...wie ein Link also,...dürfte es bequemer und Ressourcenschonender sein, doch Links zu verwenden und diese per CSS so zu gestalten, dass sie wie Buttons aussehen....da stehen die Pseudoklassen dann ja zur Verfügung.

 

[Superhonko]

Ich würde ja auch gerne CSS benutzen.
Das Problem ist eigentlich nur, dass bei den visited-, normal- und hover-Button ein Pfeil vor den Buttontext kommt, beim activ-Button soll der Pfeil aber hinter den Button-Text.

Vielleicht nehme ich doch lieber Flash. Mir streuben sich dabei nur dei Nackenhaare, wegen einem solch überflüssigen Effekt die Navi mit Flash zu machen... :-(

 

[Sven Mintel]

....nen Workaround...mit CSS


Er sieht so aus....eine Grafik mit dem Pfeil.
Vor und nach dem Link-Text füge ein paar Leerzeichen ein...wieviele hängt von der Grösse des Pfeils ab.

Die Pfeil-Grafik wird bei den Links als Hintergrundbild eingesetzt, wobei der Hintergrund weiterhin auf "no-repeat" und "left" gesetzt wird.

Bei a:active gebe als background-position...."right" an, fertig

<style type="text/css">
<!--
a{background:url(arrow.gif) no-repeat left;}
a:active{background-position:right;}
-->
</style>

<!-- ...... -->


<a href="blubb.htm">&amp;nbsp;&amp;nbsp;Klick&amp;nbsp;&amp;nbsp;</a>

Test