Wie mache ich in HTML nur einen Teil eines Hintergrundbildes anklickbar?

Teil eines Hintergrundbildes anklickbar

Ein Teil eines Bildes anklickbar oder klickbar zu machen ist mittlerweile Standard in HTML und CSS. Jedoch ein Hintergrundbild klickbar zu machen ist nicht ganz so einfach.

Hier ein Trick, wie man das ohne map erreichen kann, wenn man nur sagen wir einen rechteckigen Ausschnitt clickbar braucht:

Die Idee ist ganz einfach: innerhalb des HTML-Elementes, in der man eine klickbare Fläche haben will wird per absoluter Positionierung ein anchor (<a>) gelegt. Dieser ist transparent und hat die entsprechende Position (hier im Beispiel 20px von oben weg und ganz am linken Rand). Im href-Attribut trägt man das Ziel des Linkes ein – und schon tut’s.

<a id="itsbw-LogoZone" href="/" style="position: absolute;
top: 20px;
left: 0px;
height: 50%;
width: 40%;
background-color: transparent;">

 

Alternative Lösung einen Teil eines Hintergrundbildes anklickbar machen:

Will man keinen rechteckigen Ausschnitt haben sondern ein beliebiges Polygon, dann kommt man nicht umhin ein Image und eine entsprechende Map zu definieren. Dennoch kann man seine Bilder im Hintergrund lassen.

Der Trick hier funktioniert ganz ähnlich: Man nehme ein transparentes Bild, lege es über den Hintergrund deckungsgleich und definiere über das transparente Bild die Map.

Damit hat man nebenbei auch einen genialen Schutz gegen Bilderklau umgesetzt. Dieser kann zwar so nicht verhindert werden, jedoch der Feld-Wald-Wiesen-Nutzer kann das Hintergrundbild nicht so einfach mehr kopieren bzw. wird dessen nicht mehr so leicht habhaft.