probleme mit navi und mouseover

[CanRau]

hallöchen


aalso

ich mach grad ne website fürne band vom kumpel..

und jeder menü link besteht aus drei bildchen halt normal on mouseover und active

wenn ihr ma auf sie seite geht und mir der maus über Home fahrt..dann seht ihr wo mein problem is



hier der html code

<div id="home"><a href="index.php?src=home"><img src="img/spacer.gif" border="0" width="117px" height="39px"></a></div>

und der css teil

#home {
 background-image:url(../img/home.gif);
 position:absolute;top:170px;margin-left: -480px; left: 50%;
}

#home a:hover , #home a:active {
 background-image:url(../img/home_over.gif);
}

kann mir einer sagen was ich falsch mache??

 

[sokie]

AW: probleme mit navi und mouseover

du solltest die grafiken den <a> Elementen zuweisen (home.gifist dem Div zugewiesen und nicht dem a element.
dann braucht der <a> in deinem Fall eine Breite und eine Höhe, sowie die eigenschaft display:block;

 

[CanRau]

AW: probleme mit navi und mouseover

versteh zwar was du meinst aber weiß grad nich ganz genau wie man das genau umsetzt

 

[kyle66]

AW: probleme mit navi und mouseover

So in etwa:

HTML

<div id="home"><a href="index.php?src=home"></a></div>

und css

#home {
 position:absolute;
 top:170px;
 margin-left: -480px;
 left: 50%;
}

#home a {
 display: block;
 width: 177px;
 height: 39px;
 background-image:url(home.gif);
}

#home a:hover, #home a:active {
 background-image:url(home_over.gif);
}

sinnvoller wäres aber, wenn du beide Bilder in eines packst (untereinander, oben das normal und drunter das für hover,active) und dann per css nur die background-top position verschiebst um -39px; also so:

#home a:hover, #home a:active {
 background-position: 0 -39px;
}

 

[lykx1]

AW: probleme mit navi und mouseover

Und wie geht das genau?
Du willst 2 HG-Bilder zu einem Objekt (#home a) zuweisen, oder wie?

 

[kyle66]

AW: probleme mit navi und mouseover

Und wie geht das genau?
Du willst 2 HG-Bilder zu einem Objekt (#home a) zuweisen, oder wie?

Nein, ich weise in '#home a' dem A-Element ein Hintergrundbild zu und in '#home a:hover, #home a:active' überschreibe ich den Wert. Aber wie gesagt besser ist's wenn man nur ein Bild verwendet und verschiebt, da dann das Bild nicht nachgeladen werden muss, was unter Umständen zu einem kurzen Auftreten des [X] führt (je nach Browser).

 

[lykx1]

AW: probleme mit navi und mouseover

Aber wenn ich nur ein Bild verwende und dieses dann z.Bsp. hinter den Hintergrund verschieben, dann ist es doch nicht mehr sichtbar und lediglich der HG wird gesehen.
Ich dachte paekone will, dass das Bild beim MouseOver anders aussieht, also nicht komplett verschwindet.

 

[kyle66]

AW: probleme mit navi und mouseover

Es wird aber kein Bild hinter den Hintergrund verschoben. Das Bild ist der Hintergrund.

Wenn mein Bereich 39px hoch ist, mein Hintergrundbild aber 78px. Dann werden regulär nur die oberen 39px angezeigt, denn der Rest ist ja ausgeblendet. Wenn ich das Bild um 39px nach oben verschiebe dann werden die unteren 39px des Bildes angezeigt.

 

[lykx1]

AW: probleme mit navi und mouseover

Ah jetzt habe ich verstanden was du meinst. Das ist natürlich wirklich eine sehr gute Lösung. Sollte ich auch mal verwenden, weil ab und zu hat man ja echt Probleme mit dem Nachladen (Grafik beim OnMouseOver dauert, bis sie erscheint).

An Paekone: Der OnMouseOver-Effekt im IE sieht ganz gut aus, aber im FF gehts garnicht. Statt dem Glow sieht man da einen Streifen (vermutlich das Ende vom neuen Bild)

 

[CanRau]

AW: probleme mit navi und mouseover

dankeschöön

habs ersma mit den zwei bildern gemacht und es funktioniert...wenn ich zeit habe werde ich das evtl mit der ein bild variante realisieren


schönes wochenende und schöne ostern

 

[CanRau]

AW: probleme mit navi und mouseover

wollte dis jezze mal mit dem grafik verschieben ausprobieren

#home {
 position:absolute;
 margin-left: -480px;
 top:170px;
 left: 50%;
}

#home a {
 display: block;
 width: 177px;
 height: 39px;
 background-image:url(../img/home.gif);
}

#home a:hover {
 background-image:url(../img/home.gif);
 top:131px;
}

allerdings passiert einfach nix!?
also die grafik is natürlich dementsprechend bearbeitet..also das beide buttons unternander in einem bild sind..

 

[leohh]

AW: probleme mit navi und mouseover

Was du hier verschiebst ist der gesammte Button im :hover-Status.
Du willst aber nur das Hintergrundbild verschieben, was mit background-position geht.

 

[CanRau]

AW: probleme mit navi und mouseover

aah okay...bissl rumprobiert un nachgelesen un jezze hinbekomm

fallses wen interessiert..hier meine lösung

#home {
 position:absolute;
 margin-left: -480px;
 top:170px;
 left: 50%;
}

#home a {
 display: block;
 width: 177px;
 height: 39px;
 background-image:url(../img/home.gif);
}

#home a:hover {
 background-image:url(../img/home.gif);
 background-repeat:no-repeat;
 background-position:0px -39px;
}

DANKE LEOHH

 

[leohh]

AW: probleme mit navi und mouseover

aah okay...bissl rumprobiert un nachgelesen un jezze hinbekomm

So wuenscht man sich das!
Ansatz zur richtigen Loesung liefern und der Hilfesuchende sucht sich sein Zeug selbststaendig zusammen. Brav gemacht

 

[CanRau]

AW: probleme mit navi und mouseover

und wo bleibt mein lekkerlie :'schmoll:



hehe

immer machik das auch nich..manchma binnik zum beispiel schon zuu genervt haha

aber war klasse


schön abend noch und ne gute nacht