[CSS] Bild-Rollover

sverebom · 17. Juli 2005

Hi,

ich möchte ein Bild per CSS mit einem Rollover versehen.

Um die hinzukriegen, hab ich ich transparentes Gif genommen, mit einem Link versehen und mit einem CSS-Code verknüpft, der ein Hintergrund für das transparente Gif sowie einen Hintergrund für das Gif bei MouseOver angibt.

Das ganze funktioniert sogar im Internet Explorer, hört hört, aber nicht im Firefox aber seht selbst. Es geht um das Bild unten in der Navigation, von dem man nur die obersten Pixel sieht, warum auch immer.

Hier mal der vereinfachte CSS-Code zum Problem:

Code:

#navi .nn2k a {
	background: transparent url(bilder/nn2koff.gif) no-repeat top;
}

#navi .nn2k a:hover {
	background: transparent url(bilder/nn2kon.gif) no-repeat top;
}

Vielen Dank

P.S.: Ja, ich weiß, ich muß die Bildgrößen noch optimieren.

Mr. Snoot · 17. Juli 2005

Dann ist das aber doch kein Problem mit dem Hovereffekt, sondern mit der Positionierung des Bilds. Oder wird die Grafik im FF korrekt angezeigt, solange der Rollovereffekt nicht eingebaut ist?

sverebom · 17. Juli 2005

Auch ohne rollover wird es nicht richtig angezeigt.
Das Gif selber ist auch an der richtigen Position, aber das Hintergrundbil ist eben verrutscht.

Hier mal der betreffende HTML-Code falls benötigt:

Code:

<li class="nn2k"><a href="http://www.netnight2000.de"><img src="bilder/spacer.gif" alt="Net Night 2000 e.V." width="200" height="90" /></a></li>

Quidoff · 17. Juli 2005

Warum machst du diesen RollOver Effekt nich mit JavaScript per onMouseOver und onMouseOut?

HTML:

<img src="bild_mover.jpg" onMouseOver="this.src='bild_mover.jpg';" onMouseOut="this.src='bild_mout.jpg';" />

//edit
Wenn der spacer doch nur 10x10 Pixel groß ist, warum stellst du dann im img-Tag 200x90 ein? Das ist bestimmt die Angabe, die von beiden Brwosern unterschiedlich interpretiert wird.

//edit2
So wird es sowohl im IE als auch im Firefox richtig angezeigt.

Mfg
KoЯn

sverebom · 17. Juli 2005

Ich wollte für diese Kleinigkeit keine Javascript-Abhängigkeit schaffen, werde aber wohl doch erst einmal auf JS zurück greifen.

Am Tag hat es übrigens auch nicht gelegen, trotzdem danke.

Quidoff · 17. Juli 2005

Also ich finde auf JS-Abhängikeit sollte man keinen Wert legen. Welche Seite kommt schon ohne JS aus? Wenn man etwas aus seiner Seite machen will (und den Eindruck habe ich, wenn ich mir deine Seite mit den aufwendigen Grafiken ansehe), dann wird man um JS nicht drumherum kommen.

Mfg
KoЯn

sverebom · 17. Juli 2005

Ok ok, da ich in die Seite eh noch Forum und Guestbook einbaue, hast du mich überstimmt.

Na ja, aber ich wollte es einfach auch mal testen, ob es auch ohne geht

PuppetMaster · 17. Juli 2005

Lass das Spacer-Image weg und gib dafür dem Link das Block-Attribut:

Code:

#navi a.nn2k { 
	display:block;
	width:200px;
	height:90px;
	background: transparent url(bilder/nn2koff.gif) no-repeat top;
}
#navi a.nn2k:hover {
	background: transparent url(bilder/nn2kon.gif) no-repeat top;
}

HTML:

<li><a class="nn2k" href="http://www.netnight2000.de/"></a></li>

Suche

[CSS] Bild-Rollover

sverebom

Vice Admiral

Mr. Snoot

Gast

sverebom

Vice Admiral

Quidoff

Lieutenant

sverebom

Vice Admiral

Quidoff

Lieutenant

sverebom

Vice Admiral

PuppetMaster

Admiral

Ähnliche Themen