Clickable Overlay

This article will take about 2 minutes to read.

What does it do?

In a nutshell, it lets you put clickable area links over an image with an absolute offset.

Figma and other design mock applications are able to show navigation between multiple images via predefined touch targets. I’m able to emulate the same thing in Jekyll.

Why?

This project is in preparation for a larger archival task. I consider Pokemon Go to be a real high point in terms of design, so I would like to capture the experience of using the app.

How?

The image urls, their links, and their data are all contained in a yaml file that looks like this

- image: "/projects/clickable-overlay/map.png"
  id: map
  width: "408px"
  height: "726px"
  hotspots:
    [
      {
        id: "#squirtle",
        top: "313px",
        left: "94px",
        width: "78px",
        height: "83px",
        border: true,
      },
    ]

When this data is injected into the component, it will resize the image, then create links at the given offset.

Since Jekyll can only generate static sites, I perform navigation via fragment URLs. Therefore it is possible to just scroll up and down the page to see all of the possible options. But if you want to navigate like we would normally do on the app, you will need to click on marked touch area.