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 denklickbaren Bereich. Die Lösung ist wie so oft überaus simpel. Es gibt die CSS Eigenschaftvisibility. Mit visibility: hidden; ist es möglichElemente auszublenden. Allerdings kann ich weder das h1 noch das a-Tag ausblenden, denn dadurch würdeder Link komplett verschwinden. Was ganz einfach fehlt, ist ein weiteres HTML Form Tag zwischen dem h1 unddem 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 bleibtdennoch weiter klickbar.

Header Aufbau