Bewegte Navigationsgrafiken

[silv]

Hallo zusammen.

Ich baue mir gerade eine Homepage auf und stosse an die Grenze meines wissen bezüglich HTML Kenntnisse.
Ich versuche seit Tagen folgendes zu erreichen:

Auf jeder Seite gibt es einen Navigationsbereich. Ich versuche für die Links, die einem in eine andere Rubrik leiten, Grafiken einzusetzen.

Konkret versuche ich, dass am Anfang ein Button erscheint, den ich im Photoshop erstellt habe. Dieser sollte ersetzt werden durch einen zweiten, wenn man mit der Maus darüber fährt. Dies habe ich ja noch geschafft. Doch nun möchte ich gerne, dass eine dritte, andere Grafik am selben Platz erscheint, wenn man diesen Link drückt. Das Ziel dieser Sache ist, dass man in dem Bereich, wo die Navigation ist, sieht, anhand des ersetzten (dritten) Bild, dass man in eben dieser aktivierten Rubrik ist.

Vielleicht hat ja sogar jemand meine Vorstellung verstanden und kann mir helfen. Dafür danke ich schon im Voraus.

silv

[Christoph Schnauß]

hallo,

nun möchte ich gerne, dass eine dritte, andere Grafik am selben Platz erscheint, wenn man diesen Link drückt

Dafür gibt es den EventHandler onclick.

Grüße aus Berlin

Christoph S.

[Auge]

Hallo

Doch nun möchte ich gerne, dass eine dritte, andere Grafik am selben Platz erscheint, wenn man diesen Link drückt. Das Ziel dieser Sache ist, dass man in dem Bereich, wo die Navigation ist, sieht, anhand des ersetzten (dritten) Bild, dass man in eben dieser aktivierten Rubrik ist.

Redest du vom Mausklick ansich oder davon, dass auf der neu geöffneten Seite eine andere Grafik eingefügt wird?

Im ersten Fall lohnt sich der Aufwand meiner Meinung nach nicht. Je nach Verbindung wird die neue Seite recht schnell geladen sein und der Besucher wird vom Bild höchstwahrscheinlich nichts mitkriegen.

Um die geladene Seite in der Navigation besonders hervorzuheben, kannst du den Menüpunkt mit einer ID versehen und dieser per CSS ein Hintergrundbild zuweisen.

HTML (Navigationsliste):

<ul id="navi">  
 <li><a href="#">Start</a></li>  
 <li id="hier">Bla</li><!-- aktuell geladene Seite -->  
 <li><a href="#">Blubb</a></li>  
 <li><a href="#">irgendwas</a></li>  
 <li><a href="#">Impressum</a></li>  
</ul>

CSS:

  
#hier {  
background-image:url(pfad/zum/extra.bild);  
/* weitere Angaben */  
}  

Tschö, Auge

[ABC]

Hallo,

Konkret versuche ich, dass am Anfang ein Button erscheint, den ich im Photoshop erstellt habe. Dieser sollte ersetzt werden durch einen zweiten, wenn man mit der Maus darüber fährt. Dies habe ich ja noch geschafft.

Das hast Du hoffentlich mir CSS gelöst. Und zwar mit Hintergrundgrafiken und der Pseudoklasse :hover.

Doch nun möchte ich gerne, dass eine dritte, andere Grafik am selben Platz erscheint, wenn man diesen Link drückt.

Dann machst Du nämlich das selbe mit :active und der entsprechenden Grafik.

Das Ziel dieser Sache ist, dass man in dem Bereich, wo die Navigation ist, sieht, anhand des ersetzten (dritten) Bild, dass man in eben dieser aktivierten Rubrik ist.

Oder doch nicht. Das ist etwas komplexer.

3 Lösungen:

1. Du hast statische HTML-Seiten und gibst der "aktiven Rubrik" in der Navigation eine andere id / class (CSS). Das ist bei kleinen Seiten durchaus machbar.

2. Irgendwas mit JavaScript

3. php

[wahsaga]

hi,

Dann machst Du nämlich das selbe mit :active und der entsprechenden Grafik.

Bitte informiere dich, worauf sich :active bezieht.
Es dürfte kaum das vom Fragesteller gewünschte sein.

gruß,
wahsaga

[ABC]

Bitte informiere dich, worauf sich :active bezieht.
Es dürfte kaum das vom Fragesteller gewünschte sein.

Weiter unten war noch mehr Text.