Haben Sie jemals bemerkt, wie manchmal, wenn Sie mit der Maus über ein Bild fahren, es für eine Sekunde leer wird und dann das Hover-Bild lädt? Wenn Sie jedoch wieder darüber fahren, ist alles nahtlos.
Hier ist ein Beispiel dafür, was ich meine, anhand meines Underground-Leiter-Bildes (in zwei Teile zerlegt).
Das liegt daran, dass zwei separate Bilder geladen werden müssen, und das zweite (beim Hover) benötigt zusätzliche Zeit zum Laden, wenn der Hover-Effekt ausgelöst wird.
In diesem Beitrag zeige ich Ihnen, wie Sie diese Verzögerung mit einer CSS-Technik beseitigen können, die das gesamte Bild auf einmal lädt und einen Teil davon anzeigt.
Kombinieren Sie das Bild
Der erste Schritt, um dies zum Laufen zu bringen, ist die Kombination beider Bildhälften zu einer. Sie können Ihren bevorzugten Bildeditor verwenden, um dies zu tun. Kopieren Sie einfach beide Bilder, verdoppeln Sie die Höhe und fügen Sie das inaktive Bild über das aktive ein.
Das Bild in der Mitte sollte das sein, was Sie anstreben. Nun kommen wir zum CSS.
Der Code
Der erste Schritt in CSS besteht darin, die Höhe des Bildes auf die Hälfte zu begrenzen (im Grunde, damit nur die obere Leiter angezeigt wird).
Zu diesem Zweck verwenden wir eine Klasse namens .rollover-tut. Da das ursprüngliche Leiterbild 153 × 149 ist, verwenden wir diesen CSS-Code:
.rollover-tut {
height: 149px;
width: 153px;
display: block;
}Da wir einen Link erstellen, verwenden wir den folgenden HTML-Code:
<a class="rollover-tut" href="#"></a>An diesem Punkt sollte Ihr Link wie das ursprüngliche Leiterbild aussehen, ohne Hover-Effekt (noch).
Um den Hover-Effekt zum Laufen zu bringen, verwenden wir die CSS-Eigenschaft background-position in der :hover Pseudoklasse.
.rollover-tut:hover {
background-position: 0 -149px;
}
Mit dem obigen CSS-Code verschieben Sie das Hintergrundbild um 149 Pixel nach oben (denken Sie daran, die Höhe eines Leiterbildes oder die Hälfte von beiden kombiniert).
Eine einfachere Art, sich daran zu erinnern, ist die Verwendung des folgenden Hover-Codes anstelle dessen, der den gleichen Effekt hat, und Sie müssen sich keine Zahlen merken (Hut ab: Art Webb über die Kommentare):
.rollover-tut:hover {
background-position: bottom left;
}Und hier ist, was Sie bekommen:
Beachten Sie, dass es jetzt keine Verzögerung zwischen dem Hover-Effekt gibt, da das gesamte Bild auf einmal geladen wird.
Fazit
Diese Technik kann für praktisch jeden Hintergrundbild-Rollover-Effekt verwendet werden. Ich bin mir nicht sicher, ob jemand von Ihnen mein persönliches Blogdesign in letzter Zeit überprüft hat, aber ich verwende es extensiv für praktisch jeden Link mit einem Hintergrundbild (und den Submit-Button auf meinem Kommentarformular).
Ich hoffe, Sie alle haben diesen CSS-Tipp genossen. Wenn Sie Ideen für zukünftige CSS-Tipp-Beiträge haben, lassen Sie es mich in den Kommentaren wissen.
WOW! Gutes Tutorial! Ich mag es!
Ich werde Ihnen vorschlagen, die Navigation der offiziellen Apple-Website zu untersuchen. Es ist eine großartige Verwendung von CSS-Sprites. Eine weitere sehr effektive Verwendung von CSS-Sprites finden Sie hier.
http://www.problogdesign.com/wp-content/themes/pro-blog-design3/images/pbd-png-sprite.png
Sehen Sie sich dieses Bild an und sehen Sie dann, wie Martin es auf verschiedene Stellen in seinem Blog aufgeteilt hat.:}
Es gibt definitiv einige fortgeschrittenere Möglichkeiten, diese Technik zu nutzen. Die, die ich gemacht habe, war wahrscheinlich die einfachste von allen.
Ich habe auch etwas Ähnliches auf CSS Tricks bemerkt, was ich interessant fand.
http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-6/images/css-tricks.png
Hallo Leland,
Das ist ein sehr, sehr guter Beitrag für Anfänger, die immer noch 2 verschiedene Bilder verwenden, um Bild-Rollover zu erstellen – sehr gut geschrieben, kurz und bündig! Wunderschöne Buttons auch!
Ich benutze Sprites erst seit kurzem in den Projekten meiner Kunden (fand es letztes Mal ziemlich mühsam, lol).
Ich habe ein riesiges Bild, das alle Icons und Buttons enthält, die ich für die Website benötige. Dann habe ich background-position verwendet, um jedes Element anzuzeigen. Es kann wirklich, wirklich mühsam werden, wenn es zu viele Elemente gibt, aber es lohnt sich wirklich.
Übrigens, es ist mein erster Besuch auf Ihrer Website. Ich liebe es so sehr, viele schöne & dezente Details
Danke Iwana, freut mich, dass dir das Tutorial gefallen hat. Ich schätze auch die netten Worte über meine Seite. 😀
Diese Technik nennt man CSS Sprites.
Du könntest noch einen Zustand hinzufügen... Beispiel: normal, hover, ausgewählt... Und dann änderst du für diese drei Zustände einfach die Hintergrundposition nach oben links, mittig links und unten links. Hinweis: Diese Methode erfordert ein wenig PHP-Code :)
Danke für die Klarstellung, Milos. Vielleicht schreibe ich einen Folgebeitrag darüber, wie man einen mit einem ausgewählten/aktiven Zustand erstellt, während man immer noch ein Bild verwendet.
Du meinst CSS-Code (und nicht PHP), oder?
Ich meine CSS und ein wenig PHP. In diesem Fall brauchen wir das PHP, um zu deklarieren, wann ein Link im ausgewählten Zustand ist. Hier ist ein kurzes Beispiel für eine Website mit zwei Seiten (Seite1 und Seite2):
Code für Seite1:
<?php $thisPage="Willkommen auf Seite1!"; ?><br> <head><br> <title><?php if ($thisPage!="") echo "$thisPage ::"; ?> mysite.com</title><br> ...</head><br> <body><br> <ul id="menu"><br> <li><a class="page1" <?php if ($thisPage=="Willkommen auf Seite1!") echo "id=\"selected\"" ; ?> href="page1.php">Seite1</a></li><br> <li><a class="page2" <?php if ($thisPage=="Willkommen auf Seite2!") echo "id=\"selected\"" ; ?> href="page2.php">Seite2</a></li><br> </ul><br> ...Inhalt...
</body>
Für Seite2 einfach die Variable $thisPage auf „Willkommen auf Seite2!“ setzen
CSS für Links:
#menu a {background-position: left top;
}
#menu a:hover {
background-position: left center;
}
#menu a#selected, #menu a#selected:hover{
background-position: left bottom;
}
Das ist alles :) Prost
Großartig, ich weiß, dass WordPress manchmal Standardklassen für aktive Seiten ausgibt, wenn man seine Funktionen verwendet.
Wie .current-page-item (für aktive Seiten) oder .current-cat für aktive Kategorie-Archive.
Danke für die Tipps.
Kein Problem 😉 Prost
Ich liebe es, ein Bild für den normalen und den Hover-Zustand zu verwenden. Die einzige Änderung, die ich vornehmen würde, wäre die Hintergrundposition des Hover-Zustands. Ändern Sie sie zu:
.rollover-tut:hover { background-position: bottom left; }
Auf diese Weise müssen Sie die Größe nicht anpassen, wenn Sie die Größe des Bildes ändern.
Ah…wow, daran habe ich nie gedacht, aber es ergibt vollkommen Sinn. Danke für den Tipp.
Aber wenn Sie die Größe des Bildes geändert haben, müssten Sie dann nicht die Höhe und Breite in der ersten Deklaration ändern?
Es hilft trotzdem, da es nur eine Sache weniger ist, die geändert werden muss.
Schön und einfach. Vielleicht hört das auf, dass Leute 2 Bilder für Rollover verwenden... nun ja, für einzelne Bilder =). Gutes Tutorial, Mann, wird für einige Leute in Zukunft nützlich sein =)
Freut mich, dass dir das Tutorial gefallen hat, Anto.