Links: wie mit CSS anderes "Bild"?

[Shugen]

Hallo Leute...

Ich hab da mal ne Frage zu CSS. Ich weiss, wie ich mit CSS Links eine andere Farbe geben kann, das sie fett sind wenn ich sie auswaehle und all das andere Zeug zur Gestaltung. Was ich aber leider nicht weiss, ist, wie ich einem aktiven Link ein anderes "Bild" zuordne...

Es geht mir naemlich darum, das ich nicht einfach nur Text-Links benutzen moechte, sondern halt Bilder. Diese sollen sozusagen meine "Buttons" fuer's Menu werden. Und der ausgewahlte Menupunkt (also der aktive Link) soll immer ein anderes Bild haben, wie die Menupunkte, die nicht ausgewaehlt sind (damit man also sieht, in welchem Menupunkt man sich gerade befindet).

Weiss da vielleicht jemand Rat ?

Ich danke euch jetzt schon mal fuer eure Hilfe...

Greetz...

 

[Sven Mintel]

Hallo...
das geht mit CSS so gut wie garnicht.

Du könntest zwar theoretisch ein transparentes Bild in der Grösse der Buttons einbinden und je nach Pseudoklasse ein anderes Hintergrundbild angeben, aber das würde nicht den von dir gewünschten Effekt bringen...
denn die Pseudoklasse :active(welche du wahrscheinlich verwenden willst), ist nur in dem Moment wirksam, wo auf den Link geklickt wird...

Normalerweise macht man das mit Javascript.... schau mal dort im Forum nach, du solltest dort Dutzende Beiträge mit Lösungsmöglichkeiten finden.

 

[kaidoh]

hallo,

ich denke, du meinst ungefähr folgendes:

Zunächst einmal der HTML-Code für das Menu:

	<ul id="nav">
		<li><a href="#" id="men_1"><span>menupunkt1</span></a></li>
		<li><a href="#" id="men_2"><span>menupunkt2</span></a></li>
		... etc ...
	</ul>

Dann das CSS:

#nav li span { display: none; }

Damit wird der Text im Browser versteckt. Es empfiehlt sich jedoch, ihn dennoch anzugeben, damit auch Textbrowser und evtl. andere nicht-CSS-fähige Ausgabegeräte ein Menu anzeigen.
Dann weist du denn Menupunkten Bilder zu:

#men_1 { background-image: url(MeinTollesMenuBild1.gif)
#men_2 { background-image: url(MeinTollesMenuBild2.gif)

Dann kriegen die Buttons Mouse-Over-Zustände:

#men_1:hover { background-image: url(MeinTollesMenuBild_Over1.gif) }
#men_2:hover { background-image: url(MeinTollesMenuBild_Over2.gif) }

Bei der Kennzeichnung des aktiven Punktes gebe ich meinem Vorposter halbrecht: Das geht mit CSS nicht automatisch. Es bleibt dir dabei wenig anderes übrig, als in jeder HTML-Datei den aktiven Menupunkt eigens zu kennzeichnen.
Das geht zum Beispiel mit einem Inline-CSS-Attribute. Auf das Beispiel bezogen: Nehmen wir an, Menupunkt 1 wäre der aktive. Dann müsste der HTML-Code wie folgt umgeschrieben werden:

	<ul id="nav">
		<li><a href="#" id="men_1" 
			style="background-image: url(MeinTollesMenuBild_aktiv1.gif)">
			<span>menupunkt1</span></a></li>
		<li><a href="#" id="men_2"><span>menupunkt2</span></a></li>
		... etc ...
	</ul>

Inline-CSS-Anweisungen sind höherwertig, als die aus dem CSS-Stylesheet, sodass der vorherige Eintrag für #men1 überschrieben wird.

Soweit die grundlegende Funktionalität. Bevor so ein Menu gut aussieht, müssen natürlich mit CSS noch richtige top, left, width bzw. height-Werte zugewiesen werden. Das wirst du aber sicherlich selbst feststellen

Viel Spaß beim Ausprobieren

kaidoh