In den unendlichen Tiefen des World-Wide-Webs bin ich neulich auf einen Artikel über Product Highlighting mittels CSS und Prototype.js gestossen. Interessante Geschichte, dachte ich mir, aber geht das auch ohne Javascript?
Also fing ich an zu experimentieren…
Highlighting Boxes. Klicken für Testcase.
Moderne Webseiten (z. B. Shops oder Blogs) bedienen sich häufig auffälliger Objekte (Boxen, Badges o. ä.), um die Aufmerksamkeit des Besuchers auf sich ziehen. So werden besondere Angebote auf der Startseite präsentiert oder auf die neusten Posts aufmerksam gemacht. Klickt man sie an, gelangt man zur Beschreibung oder zum vollständigen Artikel.
Eine Möglichkeit solche Objekte mit textlichen und/oder grafischen Inhalten zu erstellen möchte ich hier kurz vorstellen.
Eigentlich ist es simpel. Als Aufbau dient eine herkömmliche Liste, die jeweils einen Anchor-Tag beinhaltet. Eine ganz normale Navigationsstruktur also.
Die Grundfunktion basiert auf :hovern der li-Tags. Der IE6 macht das leider von Hause aus nicht mit. Er ist lediglich in der Lage Anchor-Tags (a) mit :hover zu erkennen. Deshalb muss er ein wenig präpariert werden. Das geschieht mit einem Conditional Comment und einer Behavior-Datei (.htc). Diese habe ich mir von Whatever:hover besorgt.
Sie hat mir auch bei meinem Dropdown-Menü geholfen.
Auf eine kleine Abnormität im IE6, die ich nicht in den Griff bekommen habe, möchte ich noch hinweisen. Beim überfahren der linken Box einer Reihe mit der Mouse springen die anderen Boxen um 10px in float-Richtung. Wer mir da einen Tipp geben kann ist herzlich Willkommen!
Vielmehr gibt es dazu eigentlich nicht zu sagen. Die Dateien sind weitestgehend selbsterklärend.
Einen Testcase gibt es hier und hier kann man es downloaden.
Highlighting Boxes Downloads: 170
