Quick Tip: Image Maps in rukzuk

Max Köhler

Die Imagemap ist sicher eine Erinnerung an die frühen Tage des Webdesigns - ich musste mir von meinem Chef erklären lassen was das war. Man würde mit dem <map> tag in HTML eine Liste von Koordinaten mit dazugehörigen href-Attributen definieren. Dann hätte man von einem Image-Tag auf diese Liste verwiesen, und wie durch Zauberei würden die definierten Bereiche im Bild klickbar. Und das ist nur die Spitze des Eisbergs.

Auf jeden Fall stellt sich heraus: Es gibt auch heute Situationen in denen klickbare Bilder hilfreich sein können, und es gibt einen einfachen und sauberen Weg, das in rukzuk umzusetzen.

Wir verwenden eine ganz einfache Struktur: Ein Bild-Modul das die benötigten Link-Module enthält. Wenn du diesen Links Höhe und Breite gibst und absolut positionierst kannst du sie einfach über das Bild an die richtige Stelle ziehen.

Sowohl das Bild als auch die Link-Module skalieren automatisch bei verschiedenen Auflösungen. Hier ist ein Screenshot:

Ich habe den Link-Modulen hier eine grüne Hintergrundfarbe gegeben um sie besser sehen zu können, das solltest du am Ende natürlich wieder abschalten

Protip: Wenn du andere Formen als Rechtecke für die clickbaren Bereiche brauchst könnten die Transformations- und Abgerundete Ecken-Styles hilfreich sein.

Hast du einen Tip den du teilen möchtest? Schreib uns @rukzuk auf Twitter!

Built with pride in rukzuk © 2015 rukzuk AG