An sich überhaupt nicht neu, aber viele kennen diese bestimmte Vorgehensweise zum Erzeugen eines grafischen MouseOver-Effektes doch noch nicht und arbeiten immer noch mit verschiedenen Background-Images oder gar mit JavaScript.
Wenn man so eine Webseite gestaltet, soll es ja mitunter vorkommen das man z.B. einen MouseOver (Hover) Effekt bei einem grafischen Button z.B. erzeugen möchte.
Das ist an und für sich ja auch gar kein Problem- bislang hat man dies eben meist so geregelt, das man zwei verschiedene Bilder (z.B. Btn_grau und Btn_hellgrau) hochgeladen hat, die je nach Status per CSS Eigenschaft background-image einfach ausgetauscht werden.
Nun kann man dies aber auch so regeln, das man nur ein einziges, grössres Bild für sämtliche Grafiken auf den Server lädt und (bei gleichbleibendem background-image) mit der CSS Eigenschaft background-position arbeitet. D.h. man nimmt dasselbe, große Hintergrundbild, welches alle benötigten Grafiken enthält, verschiebt aber lediglich die Position, um das gewünschte Hintergrundbild anzuzeigen.
Dies kann man natürlich selbst machen, indem man alle Button-Grafiken in ein einziges „großes“ File packt und auf den Server schickt. Um eventuelles Gefrickel in der CSS zu vermeiden gibt es aber praktischerweise den CSS Spritegenerator(s. Screenshot)
Dies ist ein äusserst praktisches Tool, wo man seine einzelnen Button-Bilder gezippt in einem Paket hochladen kann, und welches dann die passende CSS dafür ausspuckt.
Ein Vorteil gegenüber der herkömmlichen Bilder-Austausch Methode ist natürlich der entfallende http-Request, d.h. der Browser muss nicht erst eine Anfrage schicken, um das Bild auszutauschen, er muss einfach nur die Position ändern, das Bild ist ja schon im Browser geladen.
Weiterführende Artikel zu dem Thema:bei den webkrauts & bei a list apart
Schreibe einen Kommentar