Quick Tip: Image Maps in rukzuk

Max Koehler

Imagemaps are certainly a bit of a throwback to the old days of web design. I wasn't even around back then, so I had my boss explain to me what they were about. You'd have a <map> tag in your HTML that defined a set of coordinates with hrefs associated to them. Then you'd reference that map from an image tag, and the areas you defined would magically become clickable in the image. Wild stuff.

Anyway, it turns out: There are situations where imagemap-like behaviour can be useful today, and there's a super clean way of achieving it in rukzuk without going through the above craziness.

That way is to use an image module with link modules nested inside of it. If you give those link modules a width and height and make them absolutely positioned you can move them over the image just where you want the clickable areas to be.

Both the image and the links will automatically scale on different resolutions. 

I've given the links a background color to see them better, but for production you'll of course want to turn those off.

And that's it: You've built an image with different clickable areas that lead to different places and can be easily changed at any time. Protip: If you need different shapes for the click areas, the transformation and rounded corner styles might help you out.

Got any quick tips to share? We'd love to hear them, hit us up on Twitter @rukzuk!

Built with pride in rukzuk © 2018 rukzuk AG