bg
APML-Filter

CSS-Spielerei Bilder-Viewer mit einem Hauch von Javascript

by Gabriele 17. Juli 2010 02:47

Bei reinem CSS wie im vorangegangenen Beispiel kann ein Bildwechsel nur beim Hovern über ein anderes Thumbnail erfolgen. Immerhin ist so eine Bedienung auch mit Browsern möglich, in denen Javascript gar nicht läuft. Für alle anderen erhöht sich der Komfort der Konstruktion mit Hilfe eines kleinen Kniffs. Der Body wechselt beim Anklicken eines Thumbnails seine Klasse, und das gewählte Bild bleibt bis zum nächsten Clickevent sichtbar - sofern kein Hovereffekt es überblendet. Hovern hat immer Vorrang (festgelegt mit z-index). Auch bleibt nun das Thumbnail des jeweils ausgewählten Bildes voll sichtbar, außer die Seite wurde gerade frisch geladen.

Code

Ausprobieren

(getestet mit den aktuellen Versionen von Firefox, Safari, Opera, Internet-Explorer 7 und 8)

Tags:

CSS

Kommentare sind geschlossen

Month List

BlogNetzWerke

Blog Verzeichnis und WebkatalogArtikelverzeichnis, Social Bookmarking, RSS-Verzeichnisfrisch gebloggtBlogPingR.de - Blog Ping-Dienst, BlogmonitorBlogtotalRSS Verzeichnisblogoscoop Blogverzeichnis - Blog Verzeichnis bloggerei.deAdd to Technorati FavoritesWeb Design Blogs - BlogCatalog Blog Directory