Frage zu Navigation (Webdesign)

Hi,

also ich habe mal eine kleine Frage bezüglich der Navigation auf einer Webseite. Die Buttons habe ich bereits fertiggestellt. Beispielsweise habe ich einen Button mit der Aufschrift "Home". Diesen habe ich allerdings in zwei Farben erstellt. Nun möchte ich, dass die Bilder wechseln, wenn ich mit dem Mauszeiger auf dem Bild bin (die Bilder werden mit einem Hyperlink ausgestattet). Eben wie bei den Pseudoelementen in CSS.

Nun ist es schon etwas länger her, seitdem ich mich mit CSS und Co beschäftigt habe. Allerdings erinnere ich mich nur gelernt zu haben, wie man auf "normale" Weise die Schriftfarbe von Links und deren Hintergrund (wenn einer definiert worden ist) zu verändern. Wie ich das mit Bildern anstelle, ist mir leider unbekannt.

Ist dies mit CSS überhaupt möglich, oder müsste ich mir andersweitig helfen? Wie müsste der Code aussehen, wenn es denn doch mit CSS geht? Und kann man eigentlich das Verändern von allen Links verändern? Damals, als ich mir die Pseudoelemente mal kurz angeschaut habe, habe ich nur gelernt, wie man die Veränderungen für alle Links definiert. Und das möchte ich hier aus offensichtlichen Gründen vermeiden (, denn wenn ich richtig gedacht habe, würden alle anderen Buttons ansonsten immer zum gleichen Button wechseln).

Hallo,

es wäre gut, wenn man den Code sehen könnte, damit man Dir direkt weiter helfen kann, aber vielleicht reicht es Dir auch schon, wenn ich es versuche zu erklären.

Erst einmal kannst Du natürlich jeden Verweis (=Link) für sich selbst verändern. Keiner muss dem anderen gleichen, aber meistens wird es ja gerade in Hinblick auf die Benutzerfreundlichkeit so gehandhabt, dass man halt dieselben Farben nimmt, wenn man einen Verweis als besucht markieren möchte oder aber als noch nicht besucht. Oft werden Verweise ja auch unterstrichen, wenn man mit dem Mauszeiger über den Verweis fährt, damit man weiß, dass es sich um einen Verweis handelt. So hat man dann für die Art der Verweise oftmals schon das bekannte Verhalten wie auf anderen Seiten, und der Nutzer der Seite findet sich dadurch schneller zurecht, was ja sehr wichtig ist, da ansonsten schon viele Nutzer vermutlich die Seite wieder verlassen, bevor Sie überhaupt etwas angeschaut haben. Also sei vorsichtig, in wie weit Du diese Verweise total anders gestaltest. Auf einigen Homepages mag das witzig und passend sein, aber häufig trägt es nicht zu einer Verbesserung bei. Man kann natürlich auch kleine Grafiken mit der gängigen Methode von Text kombinieren, was durchaus sehr schick aussehen kann.

Um die Verweise getrennt voneinander zu deklarieren, musst Du natürlich bei den Cascading Stylesheets darauf achten, dass Du die Regelungen zur Kaskade verstanden hast. Unter selfhtml findest Du die dazu erforderlichen Mittel.

Verweise mit zwei eingebundenen Grafiken lassen sich zum Beispiel durch die Cascading Stylesheets oder aber auch durch Javascript gestalten. Willst Du mehrere Grafiken verwenden, solltest Du mir das bitte noch einmal explizit mitteilen. Aber ich gehe nach deinem Text jetzt einfach mal von zwei Grafiken aus. Der Nachteil bei Javascript besteht vor allem natürlich darin, dass man Javascript überhaupt aktiviert haben muss, um die Verweise entsprechend nutzen zu können. Zudem kann es bei dem Laden der Grafiken zu Verzögerungen kommen. Möchtest Du dennoch diese Variante nutzen, gehst Du analog der Erklärung "Dynamische grafische Buttons" vor. Du musst natürlich keine Tabelle zur Strukturierung nutzen wie in dem Beispiel. In welcher Variante, bzw. Version schreibst Du denn deine Seite? Wenn Du Xhtml nutzt, muss (sollte) das natürlich angepasst werden, damit deine Seite valide bleibt.

Möchtest Du die beiden Grafiken mittels der CSS in einem Link einbinden, gehe analog der Beschreibung "Buttons mit Bildern" vor. Natürlich dauert auch hier das Laden der Grafiken länger, als wenn Du nur Text als Buttons verwenden würdest. Zudem ist diese Art der Umsetzung leider nicht fehlerfrei in allen Browsern, aber näheres erfährst Du auf der verlinkten Seite. Hier bindest Du die Grafiken als Hintergrundbilder mittels CSS ein.

Die Veränderung von nur ausgewählten bestimmten Links erreichst Du indem Du z.B. entsprechende Selektoren nutzt, die jeweils nur auf deine Angaben zu den bestimmten Links entsprechen. Wie Du unter verschiedenen Möglichkeiten diese auswählen kannst, da gibt Dir die Seite "Zentrale Formate definieren" noch einmal eine Erinnerungshilfe.

Wenn Du mit irgendetwas gar nichts anzufangen weißt, dann schreibe einfach noch einmal. Gerne auch mit Code, so dass ich Dir das entsprechend umsetzen kann, allerdings solltest Du dann angeben, in welcher Version Du die Seite schreibst, und wie deine Bilder dann im einzelnen heißen, bzw. welche Grafik generell zu sehen sein soll, und welche dann erst bei dem darüber fahren mit der Maus erscheinen soll.

Hi,

vielen Dank fuer deine ausfuehrliche Antwort!

Also einen Code kann ich dir leider nicht geben, da ich derzeit recht beschaeftigt bin, um mich ueberhaupt an die Seite ranzusetzen. Aber ich werde auf deine nuetzlichen Links zurueckkommen, wenn ich denn ein wenig Zeit habe.

PS: Die Seite soll eigtl. nur fuer mich sein, eben passwortgeschuetzt, um einige von meinen Daten, bspw. fuer die Schule, hochzuladen und dort zu sichern. Daher sollte die Gestaltung etc. kein Problem sein, hauptsache es gefaellt mir