Wie man eine einzelne CSS-Bild-Rollover

February 27

Rollover ändern in ihrem Aussehen, wenn Sie Ihre über Teil einer Web-Seite Maus. Links oder ein Bild Bilder verwenden oft Rollover-Effekten. Wenn Sie zwei separate Bilder verwenden, um ein Rollover erstellen, wird jedoch der Browser nicht das zweite Bild geladen bis der Benutzer schwebt. Dies bewirkt, dass der Rollover zu blinken, wenn zuerst aktiviert, aber kombinieren die Bilder zu einem das Problem lösen. Nach der Kombination beider Staaten der Rollover zu einem Bild, können Sie den Hintergrund Links oder rechts, dadurch vermeiden den hässlichen-flash-Effekt verlagern.

Anweisungen

1 Öffnen Sie das ursprüngliche Bild in ein Grafikprogramm und vergrößern Sie die Breite der Leinwand zweimal die ursprüngliche Größe des Bildes. Dies sollte einen Raum auf der rechten Seite des ursprünglichen Bildes erstellen, die groß genug für das Rollover-Bild angepasst ist. Fügen Sie die Rollover-Version des Bildes in den leeren Raum, und speichern Sie das Bild.

2 Den Source-Code für Ihre Webseite in einem Codeeditor zu öffnen. Wo Sie die Rollover angezeigt werden soll, fügen Sie ein paar "< Div >" Tags:

< Div Id = "Rollover" >< / Div >

Stellen Sie sich nicht alles zwischen den Tags "< Div >". Geben Sie Ihrem Div einen ID-Namen wie gezeigt, so das Div in einem Stylesheet angewendet werden kann.

3 Das Stylesheet für Ihre Website in einem Editor zu öffnen. Wenn Ihre Webseite kein Stylesheet verwendet, fügen Sie den CSS-Code zwischen ein paar "< Stil >" Tags:

< Typ style = "Text/Css" >< / style >

4 Erstellen Sie eine Stilregel für die Rollover, die seine Breite und Höhe des Originalbildes festlegt. Legen Sie den Hintergrund des Div als das kombinierte Original und Rollover-Bild:

Rollover {} Breite: 150px;Höhe: 50px;Hintergrund: url('path/to/rollover.png');}

Dateipfad zu der innerhalb "url()" muss den Pfad zu der kombinierten Bild auf Ihrem Web-Server übereinstimmen.

5 Schreibe die Stilregel Hoverzustand für Ihre Rollover. Die ": Hover" Selektor in CSS weist den Browser an eine Regel anwenden, wenn ein Benutzer seine Maus über eine gezielte Element bewegt wird. Innerhalb dieser Regel legen Sie die Hintergrund-Position und bewegen Sie das Bild über den Rollover-Status anzeigen. Ermittelt die Position, die Breite des kombinierten Bildes in zwei Hälften geteilt, und mache es dann negativ:

Rollover: Hover {} Background-Position:-150px 0;}

Der erste Wert "-150px," bewegt sich der Hintergrund Bild 150 Pixel nach links, um den Rollover-Staat zu offenbaren. Der zweite Wert ist die Position des Hintergrunds von der Spitze, die Sie bei Null verlassen sollte.

Tipps & Warnungen

  • Sie können auch Verknüpfungen mit Rollover-Bilder erstellen. Ersetzen Sie den Code Div, mit ein paar Ankertags, halten den gleichen ID-Namen. Text zwischen den Ankertags werden auf dem Hintergrundbild zeigen. Hinzufügen "angezeigt: block;" in die "#rollover"-Stilregel Link kompatibel mit Eigenschaften Width und Height zu machen.