CSS Imagemap

Ich dachte ich könnte für das Bild im Header, einen HTML Text Link nutzen, nur leider pixelt Schrift in solcher Größe, sehr unsauber in den meisten Browsern. Das Ergebnis war unakzeptabel. Die Schrift war schnell in das Bild integriert, nur brauche ich immer noch den Link an der selben Position. Die Lösung ist eine gute alte Imagemap mit Hilfe von CSS. 

<h1>
<a href="...">cold-heat.de</a>
</h1>

Ziel ist es, den HTML Link nur zu verstecken, sprich die Schrift selbst auszublenden, nicht aber den klickbaren Bereich. Die Lösung ist wie so oft überaus simpel. Es gibt die CSS Eigenschaft visibility. Mit visibility: hidden; ist es möglich Elemente auszublenden. Allerdings kann ich weder das h1 noch das a-Tag ausblenden, denn dadurch würde der Link komplett verschwinden. Was ganz einfach fehlt, ist ein weiteres HTML Form Tag zwischen dem h1 und dem a-Tag. 

<h1>
<a href="...">
<i>cold-heat.de</i>
</a>
</h1>

Im Bild unten habe ich die 2 Elemente, um die es geht, durch unterschiedliche Rahmenfarben dargestellt. Die 2 wichtigen Tags sind hier das a-Tag und das i-Tag. Wenn das i-Tag die CSS Eigenschaft visibility: hidden; bekommt, dann ist alles zwischen den beiden Tags – also das cold-heat.de – ausgeblendet. Der Bereich bleibt dennoch weiter klickbar.

Header Aufbau