HilfDirSelbst.ch: Web allgemein: HTML und CSS / Stylesheets: CSS-Menü - Pro Menüpunt ein Bild bzw. 2 Bilder (normal / aktiv)

CSS-Menü - Pro Menüpunt ein Bild bzw. 2 Bilder (normal / aktiv) - Brauche Hilfe / Rat :)

homeedition

Beiträge gesamt: 198

23. Jan 2012, 11:44
Bewertung:

gelesen: 1770

Beitrag als Lesezeichen

Hallo,

ich baue gerade ein Popupmenu wo ich, pro Menüpunk, jeweils ein Bild geladen habe.

Mein Problem:
Ich möchte gerne beim Rüberfahren über einen Menüpunt das sich das jeweilige Bild individuell austauscht also sich der optische Zustand des Menüpunktes ändert.

Wenn man das ganze über Systemschriften löst kann man in der CSS sagen das die Schrift beim Rüberfahren z.B. bold wird. Wie kann man aber in meinem Fall sagen das sich jeweils individuell das Menübild austauschen soll?

Hier mal meine CSS:

Code

/*Menu*/ 
 
ul { 
	list-style:none; 
	height:100%; 
	} 
ul li { 
	width: 122px; 
	overflow:hidden; 
	height: 18px; 
	background: #ccc; 
	border-top: 1px solid #ddd; 
	border-bottom: 1px solid #aaa; 
	border-left: 1px solid #ddd; 
	border-right: 1px solid #aaa; 
	} 
ul li:hover { 
	overflow: visible; 
	background: #999; 
	} 
 
ul ul { 
	margin: 0px 0 0 125px; 
	width: 122px; 
	} 
ul ul li { 
	height: 18px; 
	float: right; 
	width: 122px; 
	} 
ul li a { 
	} 
a { 
	text-decoration:none; 
	color: #444; 
	display:block; 
	padding: 0px; 
	height: 0px; 
	} 
a:hover { 
	color: #ccc; 
	}

und hier wie ich das Menü in html angelegt habe:

Code

<li><a href="#"><img src="images/produkte.png" border="0"></a> 
		<ul> 
			<li><a href="#"><img src="images/spezialitaeten.png" border="0"></a></li> 
			<li><a href="#"><img src="images/feinkost.png" border="0"></a></li> 
			<li><a href="#"><img src="images/marinaden.png" border="0"></a></li> 
			<li><a href="#"><img src="images/rezepte.png" border="0"></a></li> 
		</ul> 
	</li>

Ich möchte gerne das sich beim Rüberfahren das Bild "spezialitaeten.png" in "spezialitaeten_b.png", das Bild "marinaden.png" in "marinaden_b.png" austauscht usw.

Ist das irgendwie möglich?

Vielen Dank :)

CSS-Menü - Pro Menüpunt ein Bild bzw. 2 Bilder (normal / aktiv) - Brauche Hilfe / Rat :)

Dirk Levy

Beiträge gesamt: 9464

23. Jan 2012, 12:03
Bewertung:

gelesen: 1756

Beitrag als Lesezeichen

Wäre es eine Lösung wenn Du dabei
mit einem Hintergrundbild arbeitest
und das bei den Linkzuweisungen
austauschst, also a:active und a:

Gruß
Dirk

[LMCP - LEVY MEDIA MULTICHANNEL PUBLISHING]
https://www.levy-media.de

CSS-Menü - Pro Menüpunt ein Bild bzw. 2 Bilder (normal / aktiv) - Brauche Hilfe / Rat :)

homeedition

Beiträge gesamt: 198

23. Jan 2012, 12:09
Bewertung:

gelesen: 1752

Beitrag als Lesezeichen

Leider wäre es nicht so eine optimale Lösung, da sich der komplette Button austauschen sollte da sich die Grafik in dem Button ändert und nicht nur die Hintergundfarbe :(