Rollover-Effekte für Bilder mit CSS
Wenn Sie den Mauszeiger über ein Bild auf einer Webseite bewegen, können Sie sehen, einen animierten Rollovereffekt mit JavaScript oder CSS erstellt. Rollover auftreten, wenn eine Webseite ein Bild mit einem anderen als Reaktion auf die Bewegung der Maus des Benutzers ersetzt. Seiten brauchen keine Rollover, aber diese Effekte können sich ansprechender Webseiten. Wenn Sie nicht, dass JavaScript wissen und Rollover zu Ihrer Website hinzufügen möchten, können Sie das tun mit CSS.
CSS Rollover
CSS-Rollover-Effekte erfordern mehr Arbeit als JavaScript Rollover-Effekte einrichten, aber es gibt Vorteile für die Verwendung von CSS Rollover erstellen. Wenn Sie CSS verwenden, reduzieren Sie die Zeit, die für Ihren Web-Server die Aufnahmen der verwendete Webbrowser des Benutzers übertragen. Sie machen auch Ihre Rollovereffekte sichtbar für alle Besucher der Website statt nur diejenigen, die in ihrem Browser JavaScript aktivieren.
CSS-Eigenschaften
Website-Inhaber benutzen Sie CSS, Style-Objekten auf ihren Webseiten. CSS-Attribute wie Hintergrundfarbe, Rahmen und Breite definieren, die Bilder auf einer Webseite zu sehen. CSS-Klassen definieren diese Attribute. Die folgende CSS-Klasse enthält zwei Attribute, die Border-Width und Border-style Stil namens:
{.cssClass}die Border-Width: 2px; Border-Style: Solid;}
Wenn ein Bild dieser Klasse verweist, zeigt das Bild eine feste Grenze, die zwei Pixel breit ist. CSS-Klassen können eine Webseite-Element auch ein Hintergrundbild hinzufügen.
Bild-Sprites
Entwickler einbinden CSS-Rollover-Effekten auf Webseiten, indem Sie Sprites auf ihren Seiten platzieren. Ein Sprite ist ein großes Bild, bestehend aus kleineren Bildern. Erstelle eine Sprite in einem Bild Editor durch zwei angrenzenden Bilder in einem größeren leeren Bild platzieren. Das Bild auf der linken Seite wird das Bild angezeigt, das Besucher der Website zu sehen, wann Ihre Webseite geladen. Das Bild auf der rechten Seite wird die sein, die anzeigen, wenn Maus über das Sprite bewegt werden soll. Beide Bilder müssen gleich groß sein.
Anchor-Tags erforderlich
HTML-Anker-Tags, auch Verknüpfungen, genannt machen CSS Rollover möglich. Anchor-Tags können CSS-Pseudo-Klassen verwenden, die die definieren, wie ein Link aussieht, wenn eine Maus über den Link bewegt. Das folgende Beispiel zeigt eine Pseudo-Klasse mit dem Namen "hover" an eine normale CSS-Klasse mit dem Namen MyClass angehängt:
a.myClass:hover {Background-Position:-300px 0;}
Alle Anker, die diese Klasse verweist wird seinen Hintergrund Bild 300 Pixel nach rechts verlagern, tritt eine Maus-Rollover Erstellen von Rollover-Effekt. Die Anchor-Tags muss auch die wichtigste CSS-Klasse verweisen, die die Höhe und Breite für jedes Bild in Ihrem Sprite definiert.