CSS Am Verzweifeln ... :hover mit background-bild

[Twisterking]

Hi @ all!

ich bin komplett am verzweifeln!

versuche seit Stunden mehr oder weniger die Apple HP zu kopieren!
Also mehrere Links (oben), die eigentlich nur aus Bildern bestehen, die bei Hover ihren Background bzw. ihr eig. Aussehen verändern!

Würde das gerne so lösen, dass in einer ID ala #links steht, wie die Bilder anzuordnen sind!
In Unter-Klassen (bitte helft mir auch dabei, wie man die dann nun verknüpft) dann, welche backgrounds zu nutzen sind!
Ich hoffe ihr versteht ungefähr was ich will!

plz help!

mfg
Twist

 

[Mr. Snoot]

Hü,

am besten ist es, sowohl die "normale" Schaltfläche, als auch die gehoverte Schaltfläche in ein einziges Bild zu machen. Dieses Bild verschiebest du dann beim Hovern lediglich. Dadurch verhinderst du, dass die Hoverschaltfläche erst beim Berühren mit der Maus nachgeladen wird und man dann ggf. kurz eine weiße Fläche sieht bzw. solange es läd nichts passiert.

Bei mir sieht eine Schaltfläche für die Suchfunktion bspw. so aus:




Normal sieht man die linke Hälfte, beim Hovern wird das Bild einfach verschoben und man sieht die rechte Hälfte. Da das ganze Bild beim Seitenaufruf geladen wird gibts beim Hovern eben kein Geflacker oder so. Realisieren tust du das einfach so:

#links a:link
{
  background-image:url(/bild.png);
}

#links a:hover
{
  background-image:url(/bild.png);
  background-position: -126px 0px; /* x-Richtung y-Richtung */
}

 

[Twisterking]

Genau SO will ichs!
habe mit mit diesem Thema heute über Stunden beschäftigt, brings aber im IE nicht zum laufen!
im FF gehts! ^^
Weiters habe ich evrsucht diverese Verkettungen von IDs, Klassen, :hover etc. usw. in CSS zu verstehen! ... habe aber weder gute Artikel, Tutorials noch sonst was finden können!
Vll kannst du mir dazu auch helfen?

mfg

 

[theKSK]

google.de
http://jendryschik.de/wsdev/einfuehrung/
http://www.cssplay.co.uk/menus/
http://de.selfhtml.org/css/

 

[krizzelfix]

Wenn du schon eine Vorlage hast, wo das schon umgesetzt wurde, kannst dort doch einfach in den Quelltext schauen und gucken wie Apple das gelöst hat.

 

[Mr. Snoot]

Hab dir mal ein Beispiel gebastelt, das überall funktioniert.

In dem Fall sind alle Buttons gleich breit/hoch. Das kann man natürlich auch anders machen, dann muss man aber in der CSS-Datei entsprechend die Breiten-/Höhenangabe für jede ID separat definieren.

Auf der Apfelseite ist das ganze noch etwas anders gelöst. Dort befinden sich alle Buttons in einer einzigen großen Grafik, die dann beim Hovern entsprechend verschoben wird.

---

diverese Verkettungen

Was genau meinst du mit Verkettung?

 

[Backslash]

Soweit ich weiß, geht :hover im IE nur mit Links (<a>-Tags).
Im IE 8 geht's, in den anderen konnte ich es jetzt nicht testen, aber bin mir ziemlich sicher, dass das so war.

 

[Twisterking]

VIELEN DANK Mr.Snoot!!

Das sieht sehr gut aus ... denke das kann ich verwenden!
Vielen Dank für deine Hilfe! (und auch @ alle anderen)
Sollts noch Probs geben, melde ich mich nochmal!