CSS: F.I.M. (Fake Image Map) – eine CSS-Image-Map ohne Gif
Ein Kommentar zu meinem letzten Artikel über die F.I.M. hat mich dazu gebracht, den Aufbau noch einmal gründlich zu überdenken und das Resultat ausgiebig zu testen. Somit kann ich jetzt eine echt gute Alternative vorstellen…
Danke erstmal an Mat, der mich mit seinem Kommentar und Post auf den richtigen Weg gebracht hat und die Lösung liegt wirklich auf der Hand.
Es geht mal wieder um die Verlinkung eines Hintergrundbildes mit CSS, jedoch benötigt die CSS-Image-Map bei der vorliegenden Version nur noch einen Anchor-Tag mit einer entsprechenden Id, über die es angesprochen und formatiert wird.
Beispiel für eine Verlinkung auf dem Schriftzug ohne Gif-Stütze
Das Prinzip
Aus dem gegebenen Anchor-Tag machen wir ein Blockelement. Diesem geben wir die nötigen Dimensionen (Breite und Höhe) und positionieren es “absolut” innerhalb des umgebenen Divs. Einen Alternativtext können wir innerhalb des Anchor-Tags auch angeben, denn mit “text-indent” katapultieren wir ihn aus dem Viewport.
Ging das jetzt zu schnell? Hier ist der benötigte Style:
#fim {
top: 25px;
left: 20px;
width: 420px;
height: 55px;
display: block;
position: absolute;
text-indent: -9999px;
}
Und so sieht das HTML dazu aus:
<a href="#" id="fim" title="Freizeiter">Logo, verlinkt auf nix</a>
Einfacher geht’s ja wohl nicht und es funktioniert auf gängigen Browsern (ja, sogar dem IE6). Hiermit haben wir uns das Gif und den dazugehörigen Request sowie Sourcecode gespart.
Das Live-Demo gibt es hier und die Dateien mit allen Einzelheiten kann man hier (rar, ) downloaden (rar, 72,9 KB).
F.I.M. - ohne Gif Downloads: 314
