Navigation imagemap - css statt Java Scipt

pinky1954 schrieb:

Liebe Mitglieder, ich benötige eine Hilfestellung und komme mit meinen eigenen Denkansätzen nicht weiter. Also kein Code sondern eher eine Antwort, was ist der richtige Ansatz?

Ich erstelle gerade eine Homepage. Meine erste und ich bin trotz vieler Mühen schön weit gekommen. Allerdings habe ich die gesamte Navigation mit imagemap und einem kleinen Java Script (onmouseover) erstellt. Die Navigation so wie sie ist ist ok, allerdings würde ich gerne auf Java Script verzichten und alles auf reine CSS Basis umbauen. Allerdings bekomme ich den Bildtausch bei hover einfach nicht hin, da soweit ich weiß der Bildtausch nur auf das Hintergrundbild geht. Könnte sich das jemand mal anschauen und mir einen Rat geben, wie ich das Ganze angehen sollte. Also kein Code, eher eine Herangehensweise.

Bin für jede Hilfe dankbar.

Wünsche euch einen positiven und glücklichen Tag ... Pinky

P.S. die Homepage findet ihr unter http://s462011245.online.de/Index.html

Zum Vergrößern anklicken....

<a href="#"><img src="default.jpg"><img class="hover" src="hover.jpg"></a>

a .hover {
  display:none;
}
a:hover img {
  display:none;
}
a:hover .hover {
  display:inline-block;
}

pinky1954 schrieb:

Danke erst mal scbawik, ja, so funktioniert das mit 2 Bildern.

Leider ist die Aufgabenstellung etwas komplexer. Ich habe es mit dem Tausch von 4 Bildern zu tun, je nachdem, über welchen Bereich des Default Bildes ich hover. Vielleicht hat jemand noch eine Idee für die Abbildung dieser komplexeren Anforderung ausschließlich mit CSS?
Ich weiß, dass das mit den Bildern nicht gerade trivial ist, aber meine Freundin findest das toll und hat sich in die Grafik-Navigation verliebt (ja, so traurig ist das) und wie das halt so ist, will ich sie nicht enttäuschen. Außerdem, was schön ist, muss doch auch möglich sein, oder ist CSS dann doch nicht so mächtig?

Gruß Pinky

Zum Vergrößern anklicken....