✔ Separates Bild wechseln, wenn Klick auf Menülink

[cosmanova]

Hallo

Ich beschäftige mich seit kurzem mit CSS und habe folgendes Problem:

Ich habe ein einfaches Menü (Text) mit Hovereffekt. Unter diesen Menü möchte ich ein Bild anzeigen (oder auch wahlweise ein Text, wenn sich das einfacher realisieren lässt). Dieses Bild (oder Text) soll sich bei einem Klick auf einen Menülink ändern.

Zur Verdeutlichung:


-> Menülink1
-> Menülink2
-> Menülink3


*************
*.....Bild /....*
*.....Text......*
*************

Bei Click auf Menüpunkt1 soll das Bild / Text 'Menüpunkt1' anzeigen. Bei Klick auf Menüpunkt2 soll sich das Bild/Text ändern in 'Menüpubkt2' usw.

Ist das verständlich ?

Das ich ein Bild mittels hover wechseln kann ist klar, aber geht das auch so 'getrennt' von einander ? Gibt es da eine Funktion ? Oder geht das nur mit Javascript ? Einfachste Variante wäre wohl die Seite dann komplett neu zu laden - aber solchen Schmu u. Spaghetti-Code wollte ich mir eigentlich sparen...

Viele Grüße und schon mal besten Dank
Cosmi

 

[Maik]

Hi,

für dein Vorhaben benötigst du Javascript - der Quellcode sieht dann beispielsweise so aus:

<ul>
    <li><a href="#" onclick="document.getElementById('test').src='grafik_1.png'">Menülink 1</a></li>
    <li><a href="#" onclick="document.getElementById('test').src='grafik_2.png'">Menülink 2</a></li>
    <li><a href="#" onclick="document.getElementById('test').src='grafik_3.png'">Menülink 3</a></li>
</ul>

<img src="grafik_start.png" id="test" alt="...">

 

[cosmanova]

Also lässt sich da nichts mit CSS machen ?

Bei Javascript stellt sich doch dann immer die Frage ob es der User ausgeschaltet hat oder nicht usw - oder ist das mitlerweile nicht mehr so extrem ?

*hach* jetzt auch noch Javascript aneignen - damit hab ich mich bis jetzt noch überhaupt nicht beschäftigt :-/ Geht's da wirklich nur um den Code oben (das wäre ja noch relativ einfach) oder steckt noch viel mehr dahinter ?

 

[Maik]

Mit CSS lässt sich ein "separater" Bildertausch nicht umsetzen, und nein, es steckt nicht mehr hinter dem gezeigten Quellcode.