CSS Menü mit Hover bei Hintergrundgrafik

[raven16]

Hi, ich weiß dieses Thema wurde bestimmt schon x-mal angesprochen aber ich finde darüber nichts brauchbares:

Ich habe ein Menü gemacht mit Grafiken und auf diesen Grafiken sollen Links positioniert werden. Wenn ich auf den Link gehe oder die Hintergrundgrafik, dann soll sich durch das hover die Hintergrundgrafik ändern.

Ich weiß zwar wie man hover macht, aber ich bekomme es nicht hin, meinen Link auf die hintergrundgrafik zu legen... Derzeit ist der Link einfach neben der Grafik

<a href="home.php" class="menumiddle"
		onmouseover="Bildwechsel(5, SubmenuMouseOver)"
		onmouseout="Bildwechsel(5, SubmenuNormal)">
<img src="css/design/aufbau/menu_submenu/menu_middle.gif">&nbsp;Untermenü1</img>
</a>

Denke das ist auch gar nicht möglich, Untermenü1 von img einzuschließen, aber ich weiß nicht, wie ich es sonst hinbekommen kann, dass Untermenü 1 auf die Grafik zu schreiben und dass dann aus beiden Sachen 1 Link wird welcher ein Hover besitzt und dann die Hintergrundgrafik wechselt aber den Link stehen lässt...

Hoffe ihr wisst was ich meine

 

[Behemoth08]

Versuchs mal mit DIV Objekten.

<div class="button">Untermenü</div>

und in deinem css file dann sowas wie:

.button {
	background-image: url(...);
	}
	
.button:hover {
	background-image: url(...);
	}

 

[raven16]

Also das was ich gemacht habe klappt schon mal im Internet-Explorer... aber bei Firefox klappt das ganz und gar nicht... der erkennt das in FF noch nicht mal als Link an -.-

html-code:

<a href="home.php"><div class="menumiddle"><span style="margin-left:15px;">Untermenüpunkt 1</span></div></a>

css dazu:

div.menumiddle{
background:url(design/aufbau/menu_submenu/menu_middle.gif);
width: 192px;
height: 20px;
cursor: pointer;
}
div.menumiddle:hover{
background:url(design/aufbau/menu_submenu/menu_middle_mouseover.gif);
width: 192px;
height: 20px;
cursor: pointer;
}

den span hab ich nur noch gemacht zusätzlich, um die Menülinks 15 pixel nach rechts zu rücken

 

[TiME-SPLiNTER]

Das Problem ist, dass nicht alle Browser die hover-Pseudoklasse bei allen DOM-Elementen kennen. Jedoch kennen alle Browser diese beim Link.

Das heisst an deiner stelle würde ich einfach den Link als block darstellen, dann kannst du damit wie mit einem Div hantieren und die hover-Klasse funktioniert in allen Browsern.

<a href="home.php" class="menumiddle">Untermenüpunkt 1</a>

a.menumiddle{
display:block;
background:url(design/aufbau/menu_submenu/menu_middle.gif);
width: 192px;
height: 20px;
}
a.menumiddle:hover{
background:url(design/aufbau/menu_submenu/menu_middle_mouseover.gif);
width: 192px;
height: 20px;
}

 

[raven16]

Hmmm komisch...

Habs jetzt genauso gemacht wie bei deinem vorschlag, aber das zeigt gar keine Änderung zu meiner Version die ich hatte ...

Im IE ist alles wunderbar aber im FF erkennt der das noch nicht mal als Link an was ich doch recht komisch finde ...

 

[TiME-SPLiNTER]

Alles genau wie du es in einem Div machen würdest... habe dir oben noch den Code so umgeschrieben wie es mit einem Block-Link aussehen würde.

Um den Text zu verschieben einfach noch in a.menumiddle padding-left:15px; schreiben.

 

[raven16]

wenn ich padding-left einfüge, dann sieht es bei mir im IE und im FF so aus:

der erweitert irgendwie einfach die Box rechts

und im FF erkennt der das wieder nicht als Link an so wie du das vorgeschlagen hast


Normal sollte es in allen Browser so aussehen:

(Untermenüpunkt 1 = mouseover aktiviert)

 

[TiME-SPLiNTER]

Ja der Paddingwert wird zur Breite dazugerechnet. D.h. du musst die Breite um 15px verkleinern wenn du 15px padding erzeugst, dann ist es wieder gleich breit.

Und das ganze muss als Link erkannt werden, weil ja nur ein Link da steht und nichts mehr .

 

[raven16]

Ich weiß nicht was da falsch läuft aber irgendwie erkennt FF das einfach nicht als link an o.O
Und den Hover ladet der bei FF auch nicht :-/


Oder liegt es vll. an den Elternelementen, dass der das nicht als Link erkennt?! Echt komisch

                          <div class="inhaltbox">
				<span class="menubox">
					<div class="menutop">
						
					</div>
					<a href="home.php" class="menumiddle">Untermenüpunkt 1</a>
					<a href="home.php" class="menumiddle">Untermenüpunkt 2</a>
					<a href="home.php" class="menumiddle">Untermenüpunkt 3</a>
					<a href="home.php" class="menumiddle">Untermenüpunkt 4</a>
					<a href="home.php" class="menumiddle">Untermenüpunkt 5</a>
					<div class="menubottom">
					
					</div>
				</span>
				<span class="textbox">
					<div class="textboxinhalt">
						Hier kommt der Textinhalt der Seite hin
					</div>
				</span>
			</div>

 

[Kantholy]

btw: ich würde empfehlen, wenn du das mit hintergrundgrafiken machst, dass du sprites benutzt und bei der hover pseudoklasse die hintergrund position nur veränderst, sonst hast nämlich 1. das problem dass du viele http requests hast und 2. hast beim drüberhovern das problem dass die grafik nicht gleich geladen ist, was wiederum nicht schön anzusehen ist^^

 

[TiME-SPLiNTER]

@Kant-holz: ja das ist noch eine kosmetische Kleinigkeit, aber wenn nichts läuft bringt das auch nichts .

Also du darfst sicherlich mal keine Divs in Spans haben (Block-Elemente in Inline-Elementen = Pfui!). Aber wieso das es keine Links anzeigt weiss ich nicht. Wie sieht es denn aus (Screenshot) und CSS nach meinen Änderungen?

 

[raven16]

Also bei meinem Hauptmenü hab ich nen Javascript verwendet und da klappt das erste Sahne... nur der Nachteil dabei ist halt, dass ich mit dem JavaScript nur die Bilder beim Seitenaufbau lade und die Bezeichnung des Links auf das Bild direkt draufgeschrieben habe... nur ich möchte für das Untermenü nicht für jeden Untermenüpunkt 2 Neue Grafiken erstellen müssen (normale + hovergrafik).

Script, das für den Bildwechsel verantwortlich ist:

<script type="text/javascript">
	TeamNormal = new Image();
        TeamNormal.src = "css/design/aufbau/menu/team.gif";     
        TeamMouseOver = new Image();
        TeamMouseOver.src = "css/design/aufbau/menu/team_mouseover.gif"; 		
		
        function Bildwechsel (Bildnr, Bildobjekt) 
        {
        window.document.images[Bildnr].src = Bildobjekt.src;
        }
		
</script>

Seite:

<a href="home.php" class="team"
		onmouseover="Bildwechsel(4, TeamMouseOver)"
		onmouseout="Bildwechsel(4, TeamNormal)">
	<img src="css/design/aufbau/menu/team.gif">
</a>

CSS dazu

a.team{
	height:230px;
	width:192px;
	float:left;
	border:0px;
}
a.team:hover{
	height:230px;
	width:192px;
	float:left;
	border:0px;
}

Durch diese Methode läuft das halt ohne das man die Ladeverzögerung beim hover hat:
Normal:

mit Mouseover:

Wenn ich das gleiche so hinbekommen könnte, dass ich die Schrift per html drauf schreiben kann und nicht direkt auf das Bild malen muss, dann wäre ja alles in Ordnung XD

Ergänzung (18. Juni 2009)

Wie sieht es denn aus (Screenshot) und CSS nach meinen Änderungen?

Also es sieht so aus wie meine 2. Grafik wie es aussehen sollte mit deiner Variante... das schon mal gut... Bis halt das problem, dass der in FF das net als Link anerkennt...

 

[TiME-SPLiNTER]

Bei mir klappt dieser Code wunderbar im FF und IE (nicht Standardkonform und die Schrift muss natürlich noch genauer angepasst werden):

<html>
	<head>
		<title>test</title>
		
		<style type="text/css">
			a.team{
				display:block;
				height:30px;
				width:192px;
				float:left;
				background-image:url('team.bmp');
				color:#000000;
				padding-top:200px;
				font-size:20px;
				text-align:center;
			}
			
			a.team:hover{
				background-image:url('team_mouseover.bmp');
				color:#FFFFFF;
			}
		</style>
	</head>
	<body>
		<a href="home.php" class="team">Text</a>
	</body>
</html>

 

[raven16]

Ich vermute grad, dass ich irgendeine durchsichtige DIV-Box habe, die sich über die Links schiebt und ich deswegen in FF (weil FF das zum teil anders interpretiert wie IE) die Links nicht betätigen kann

Ich probier mal daran herum vll. finde ich den Fehler ja

Glaube auch, dass meins funktioniert wenn das erst mal behoben ist

 

[QXARE]

Ich würd das JS ganz schnell vergessen. Hat in dem Anwendungsfall keine Daseinsberechtigung und endet nur in Problemen in verschiedenen Browser (+ Inkompatibilitäten wenn JS deaktiviert ist).

Wie im anderen Thread schon geschrieben, der Aufbau deiner Navigation:

<ul id="navigation">
    <li><a href="#">Link 1</a></li>
    ...
</ul>

CSS:

#navigation ul li a {
    background: url(images/xyz.jpg);
}

#navigation ul li a:hover {
    background: url(images/xyz_hover.jpg);
}

Fürs Optimieren kannst du ein Bild verwenden und dieses per background-position oder direkt im background Attribut verschieben.

Fertig, funktioniert in jedem aktuellen Browser und ohne JS...