Make a single image clickable in different locations

Design help Animations & Interactions
1

I need to make an image of a map clicable in three different regions. For visualization purposes, say I need to have a map of Africa. A user needs to be able to click on one country to link to a page, another country to link to a second, and the ocean to link to a third.

Should I just try to place button boxes over the map in fixed locations? It would be great if I could animate the outline or solid shape of the clickable region, but if that’s not possible I’m fine doing a circle button or something.

Does anyone have any better ideas, experience with this issue, or links to any relevant tutorials??

Any help is much appreciated.

Here is my public share link: LINK
(how to access public share link)

2

could you cut the image up into different pieces, line them up so they look like one image and add a link to each section? Like a jigsaw puzzle

3

Thanks, but not really, it needs to also be responsive, so if I cut it up the potential for it to not align on older phones seems to be a big risk.

4

You might want to look at this codepen for ideas.

1 Like
5

Hi @MallPalm I’ve had experience of creating a world map with location markers. Here’s a preview design.

The structure is an absolute div set to full with a 6 row column nested inside to act as a frame over the map image. Each marker & accompanying pop-up is nested in another absolute div with percentage positioning (top, bottom, left, right - whichever is needed to get it positioned correctly). The pop ups on hover help to give context/description due to lack of outlining regions (which would be a better solution).

This was created a while ago as a simpler solution to integrating some custom code with country/region outlines, not the most responsive element but markers do retain their positions. Thought it may give some inspiration though :slight_smile:

2 Likes
6

Hi -

This is extremely helpful and sort of more of what I had in mind. Your map looks great, thank you for this suggestion.

1 Like
7

Hi @marsh, do you have more detail on how you set up Webflow to create the map? I am attempting a similar thing using columns but having issues keeping the positions static. a snapshot of how Webflow Designer looks may help.
:grinning:

8

You should try the Interactivity Studio app on Webflow (Interactivity Studio & Webflow Integration - Webflow Apps). It’s an interactive image builder that lets you outline different parts of an image so they become clickable - and each section can reveal things like text, images, videos, or different links. What’s nice is that it doesn’t require extensive coding knowledge, which makes the setup a lot easier.