Alle, die sich schon einmal fragten, ob und wie man ein Background-Image verlinken kann ohne auf CSS3 warten zu müssen, sollten diesen Post einmal lesen.
Die Antwort ist simpel, bulletproof und valide! Hier gibt’s einen Workaround…
Wer sich schon einmal mit den praktischen Image Maps in HTML beschäftigt hat, kennt ihre Tücken und weiss wie kompliziert die Handhabe ohne WYSIWYG-Editoren ist.
Einige Editoren zum Beispiel, die mittels WYSIWYG diese Maps generieren, erzeugen von Hause aus einen nicht validen Code und der ist auch nicht gerade klein und überschaubar.
Das macht z. B. der Dreamweaver 8:
<map name="Map" id="Map"><area shape="rect" coords="399,55,526,121" href="#" /></map>
Leider bemängelt der Markup Validation Service das fehlende alt-Attribut. Richtig müsste es in diesem Fall nämlich so aussehen:
<map name="Map" id="Map"><area shape="rect" coords="399,55,526,121" href="#" alt="Image Map" /></map>
“gefälschte” Image Map (klick)
Das aber nur am Rande. Bereits in meinen Artikel Background vs. Image-Tag. Bilder im Zeitalter der Handhelds erwähnte ich die Möglichkeit über “gefälschte” Image Maps Hintergrundbilder zu verlinken. Dieses hat den Vorteil, das wir die Bilder mit den besagten Verlinkungen komplett über CSS ansteuern und manpulieren können.
Kommen wir zur Sache. Eine F.I.M. besteht im Wesentlichen aus zwei Komponenten. Einem relativ positionierten Container (im angehängten Beispiel #wrapper genannt), der einen absolut positionierten Container (#fake-map) beeinhaltet. In dem inneren Container brauchen wir ein Objekt, das wir verlinken können. Hier bietet sich das gute alte leer.gif an (dürfte manchem alten Hasen noch aus Tabellen-Zeiten bekannt sein), ein transperentes .gif von 1×1 Pixel Größe eben.
Dem transparenten Gif geben wir im Stylesheet eine Weite und Höhe von 100%, sodass es sich den Ausmaßen des fake-map-Containers anpassen kann.
Über die Attribute top/right/bottom/left wird das Konstrukt jetzt einfach mittels Pixel- oder Prozentwerte ausgerichtet und fertig ist das F.I.M.
Zur Veranschaulichung gibt es einen Testcase live oder zum downloaden hier.
F.I.M. Downloads: 170
Mat
(am 05. August 2009 um 11:50)Das mit dem transparenten GIF ist mir ein bisschen zu umständlich. Wieso anstatt das Bild nicht gleich ein semantisch bedeutsameres, suchmaschinenfreundlicheres Element verwenden ohne zusätzlichen HTTP-Request? Ich habe mich in der gleichen Problematik auch schon versucht:
http://www.macgamper.com/?p=13
Freizeitler
(am 06. August 2009 um 07:38)Danke für deinen Kommentar. Der Ansatz ist wirklich eleganter.
Allerdings hatte ich in der Vergangenheit öfters Probleme mit einem ähnlichen Aufbau (ich benutze dann ein span mit “display: block” innerhalb des a-Tags) in Zusammenhang mit der .clearfix-Klasse. Der IE6 scheint den z-index dann falsch zu interpretieren bzw. zu ignorieren und der Link ist nicht mehr da.
Mit dem Gif funktioniert es eigentlich immer.