Taking Control of Image Rollover

Auf den meisten Web-Browsern gibt es eine Standard-Grenze, die sie umgibt die Bilder, die als Links verwendet werden. Es ist in der Regel einen großen, bösen, dicken hellblauen Rand. Dies ist wahrscheinlich unerwünscht, so dass in diesem Artikel werden wir nach Wegen können Sie darum kümmern in Ihrem CSS ...

So entfernen Sie die Standard-Grenze nutzen diese in Ihrem CSS:


a img { border: none; }


Sie können auch den Standard-Grenze auf verknüpfte Bilder, indem Sie "border = 0" in der Bild-Tag, aber das ist eine Eigenschaft veraltet und wird nicht empfohlen. Leider ist es in vielen Kopie enthalten ist-und-Einfügen-Code-Beispielen, da sie zwingt das gewünschte Ergebnis, ohne auf den Webseiten-Inhaber halten gute CSS zählen.

Das Standard-blauen Grenze ist nicht böse, es ist nur versuchen, hilfreich zu sein und lassen Sie das Bild, it's Umgebung ist ein Hyperlink. Nehmen wir die Verantwortung auf uns und sehen, ob wir kommen können mit ein paar Rollover für Bilder sind ein bisschen schöner und interessanter.

Der beste Weg, diesen Beispielen zu sehen ist, das Beispiel-Seite und der beste Weg zu verstehen, wie sie arbeiten, ist das Beispiel herunterladen und sehen Sie sich den Code selbst zu.

Beispiel 1: Dick Border

Dieses Beispiel gibt dem Bild ein paar Pixel der Polsterung und eine Grenze in seiner normalen Zustand und fügt eine Hintergrundfarbe auf Rollover.

Beispiel 2: Gestrichelte Thick Border

Dies ist eine ähnliche Technik nur die Rollover fügt eine dicke gestrichelte Rahmen um das Bild. Der Trick dabei ist, dass die Grenze gibt es in seiner normalen Zustand als auch, aber es ist genauso wie die Hintergrundfarbe weiß. Wenn diese Grenze nicht da war in seiner normalen Zustand und bei Rollover hinzugefügt wurde, würde das Bild Schaltstellung um Platz für die Grenze, die eine Erschütterung und unerwünschte Ergebnis würde.

Beispiel 3: Black & White in Farbe

Diese Technik wird das Bild "einfärben" auf Rollover. Das ist ein bisschen komplizierter, dass Sie nicht in der Lage, regelmäßig img-Tags im HTML verwenden. Sie verwenden Anker-Elemente mit einzigartigen Klasse Namen. Diese Anker werden spezifische Höhen und Breiten und ein Hintergrundbild. Dann auf Rollover, können Sie das Hintergrundbild für eine Swap-Farb-Variante.

Beispiel 4: Add Gradient Hintergrund

Anstelle einer festen Farbe wie in Beispiel 1, könnten Sie ein Bild. Dann rufen Sie das Bild etwas Padding auf beiden Seiten, so gibt es einen Spielraum für die Grafik angezeigt werden.

Beispiel 5: Display-Informationen

Diese Technik macht Text unter dem Bild auf Rollover erscheinen. Es nutzt die Eigenschaft background-image in CSS wie in Beispiel 3, aber in diesem Fall bleibt das Hintergrundbild unverändert. Der Unterschied ist, dass in regelmäßigen Staat, der Text begann den Bildschirm mit einem großen negativen Offset, die auf Rollover entfernt wird. Um den Text zu zeigen, bis unterhalb des Bildes statt oben drauf geben, den Anker ein Top-Polsterung ein wenig größer als die Höhe des Bildes.