5202

ein Blog über technische Fragen zu Blogger

Inhalte in Bilder verstecken

von
In dieser Skizze stecken in dem Bild insgesamt 90 Trigger-Punkte ... im 58. Punkt findet ihr das Easter Egg (Osterei)!

Wozu?

Ich habe hier das Prinzip der Image Map auf die Spitze getrieben. Ihr könnt natürlich versuchen, dutzende von Links mit position: absolute in einem Bild zu platzieren - ich hab's ausprobiert, das wird schnell unglaublich kompliziert.

Ich hab nach einer systematischeren Lösung gesucht und ein Raster mit 90 Elementen gebaut, die innerhalb des Bildes liegen. In dieses Raster könntet ihr nun (theoretisch) 90 Ereignisse per 'klick' auslösen. Ich hab's hier für lediglich ein Element demonstriert, es wären aber bis zu 89 weitere Ereignisse möglich.

Worauf diese Idee ursprünglich hinausläuft, ist damit einen Weihnachtskalender zu bauen. In einem 'Kalender-Bild' könntet ihr Beispielsweise 24 Punkte definieren und 24 'Überraschungen' drunter packen, die ihr nach und nach 'freigebt' ... ein paar weitere Ideen hätte ich auch noch dazu, aber erst mal demonstriere ich hier das Prinzip.

Um das ganze mit purer CSS und möglichst simpel zu halten, habe ich als 'Auslöser' die Pseudoklasse :active genommen. Die Skizze funktioniert damit in allen richtigen Browsern und im IE ab 9+.

Den Code findet ihr unter Download - wie immer könnt ihr damit tun und lassen was ihr wollt. Was neu ist - leider kann ich für individuelle Anpassungen kein Support mehr geben. Ich habe die letzten Wochen praktisch rund um die Uhr verschiedene Blogger in ihren Projekten unterstützt und in der Form ist das vom Zeitaufwand für mich nicht mehr zu machen :(.

Anmerkungen

Yeah, yeah ... die gute Nachricht ist, dafür werde ich hier auf 5202 wieder präsenter sein. Wenn ihr also Fragen oder Anmerkungen zu dieser Skizze hier habt, immer her damit :).