Grafischer Hover Effekt mit CSS
Ich erkläre euch wie man nur mit CSS einen sauberen Hover Effekt ohne Nachladen der Grafiken hinkriegt!
Als allererstes benötigt ihr einen Link, dem ihr in diesem Beispiel einfach eine Klasse "hover" gebt.
<a href="#" class="hover">Ich bin ein Text</a>
Den Text, den ihr in den Link schreibt, könnt ihr mit dem alt tag eines Bildes vergleichen. Er wird angezeigt wenn die Grafiken im Browser abgeschaltet sind.
Wir werden nicht wirklich den hover Effekt vorladen sondern packen ihn einfach mit dem "normalen" Image in ein Bild. Positioniert beide Bilder nebeneinander. Das dürfte dann ungefähr so aussehen:
Soll euer Button z.B. 100px breit sein, wie in diesem Beispiel, dann ist der Hintergrund mit dem Hovereffekt 200px breit.
Nun kommen wir zum CSS Teil:
.hover {
text-decoration: none;
border:0;
padding:0;
display: block;
text-indent: -9999px;
letter-spacing: -9999px;
font-size:0;
width: 100px;
height:24px;
background: url("Bilder/button1.jpg") 0 0 no-repeat;
}
Die meisten Teile dieses Codes sollten euch geläufig sein, der wichtigste Teil ist background.
Hier positionieren wir den Hintergrund an der oberen linken Ecke.
Ihr solltet, wenn ihr alles richtig gemacht habt, nun euren Button ohne Hover Effekt sehen.
So nun kommen wir zum hover Teil. Die Pseudo-Klasse :hover wird von allen aktuellen Browsern unterstützt, weshalb wir auch kein Walkaround für einen Browser benötigen.
.hover:hover {
background-position: -100px 0;
}
Das ist der Trick an der Sache. Wir ändern einfach die Position des Hintergrundbildes. Da der Hintergrund bloß aus einer Datei besteht, wird sie beim Aufrufen der Seite auch direkt komplett geladen und es kommt zu keinen nervigen Nachladezeiten für die Hover Effekte eurer Buttons :)
Hier habe ich ein Beispiel für euch vorbereitet.
h3lium
wie ist das, wenn ich das gleiche mit einer grafik machen will, allerdings ohne link?
könnte das gleiche ja machen mit href="#" aber dann springt er mir immer nach oben.
lg
h3lium
pberndt
Funktionieren würde auf jeden Fall "<a href='#' onclick='return false;'>". Davon ist aber abzuraten, da der Code dann nicht mehr semantisch korrekt wäre. Nimm lieber "img:hover" und emuliere im Internetexplorer das Verhalten mit einem Javascript.
KingEli
Hy
danke für das Tutorial, hab sie gleich nachgebaut, man kann das Werk auf www.baby-sun.de anschauen.
Daxten
Du könntest auch Flash benutzen für so einen Hovereffekt eines Bildes.
OverflooD
oO, die Umsetzung! Da muss ich nachhacken:
Die Background-Position ist zu statisch aufgebaut. So muss in jedem Fall immer die Background-Position an die Höhe angepasst werden. Intelligenter wäre es mit background-position:top und background-position:bottom.
Twisting
@Overflood: Wie oft veränderst du denn deine Navigation, dass man sowas als lästig empfinden kann? *zwinka*
OverfloodD
:P @twisting: Naja, nicht das, aber möchte man es jetzt für ne andere Grafik benutzen, dann muss man immer die Höhe anpassen, statt nur der class/ID. War ja nur so n Tip :P
pberndt
Zur Erweiterung der Idee:
Ich habe das Ganze jetzt in einem Projekt verwendet, indem ich das gesamte Menü inklusive aller Einträge und Hovereffekte in eine Bilddatei gepackt habe. Per CSS wird der richtige Teil des Bildes angezeigt. Das lässt sich wunderbar einfach aus Photoshop exportieren (Da Menüs meist eine Textebene sind) und beim CSS aufschreiben muss man außer simplen Additionen auch nicht viel können/beachten.
Nur zu empfehlen!
OverflooD
Das Ganze mit einer Grafik zu machen, bei der nur die Background-POSITION geswitched wird ist viel intelligenter - so brauch man sich nicht immer um die Höhe kümmern.
@h3lium: notfalls fängst du per JS onclick="" den klick ab. anders geht es nicht, der IE unterstützt das hovern von anderen elementen nur minder.
Twisting
@Ooverflood: background-posiiton wird hier doch geswitcht?!
Gushiken
Die Background-position wird zwar geswitcht, aber statisch. Es wird eine genaue Pixel angabe gegeben, sodass man diese verändern muss wenn man unterschiedlich breite bilder hat. Zudem könnte man die width vllt auf 50% setzen (ich weiß nich obs funktioniert, wär nur ne idee^^) damit das Objekt auch genau halb so groß ist wie das Bild. So zum beispiel:
.hover { text-decoration: none;
border:0; padding:0;
display: block;
text-indent: -9999px;
letter-spacing: -9999px;
font-size:0;
width: 50% relative;
height:24px;
background: url("Bilder/button1.jpg") left top no-repeat;
}
.hover:hover{
background-position: right top;
}
Sollte es nich so klappen bitte eben korrigieren^^
Gatsu
Sehr geil!
jan
ich bin jetzt aber mit meinen menüpunkten nicht flexibel. das heißt ich muss mein menü über das bild festlegen. wenn ich extra menüpunkte will, muss ich das bild ändern, oder?
Jenny
Vielen Dank für das tolle Tutorial. Es hat mir sehr weitergeholfen.
Grüße,
Jenny
Fargames.de
Cool :D
Sieht es nicht schön aus
DNA 328
Hallo,
der Code ist super, genau das was ich für meine neue Seite gesucht habe, den mein Team und ich werden bald die "Version 3" raus bringen und, mit solchen Buttons kommen wir hoffentlich gut an.
Ich hätte da ein Problem und zwar, habe ich den Code einmal auf der Startseite möchte aber eine zweite Grafik in den Code bauen, weiß jemand wie ich das machen kann? Hatte grad versucht aber die zweite Grafik wurde über all übernommen.
LSpreee
Hallo, realisiere das auch schon so, bin allerdings auf Deine Seite gestoßen, weil ich mir mal Gedanken über das alt="" Attribut Gedanken gemacht habe. Wenn Nutzer Grafiken deaktiviert haben kriegen sie bei mir leider gar nichts angezeigt. Dein Beispiel soll ja Abhilfe verschaffen, tut es mir leider aber auch nicht. Was muss man da noch machen?
Ika
Warum funzt das bei mir nicht in FF und IE? in Chrome läufts wies soll, bei den anderen is nix hover.