How I Created a Free Interactive Image With Clickable Hotspots 

I’m a DIY person, which is a quality that extends to my work in marketing and design. When I see something that inspires me based on its aesthetic or functionality, I’m going to figure out how to do it myself. Yet, there is one web-design dream that has escaped me and my DIY savviness for far too long: Interactive images with clickable hotspots. 

It’s something that always felt out of reach, but in the most triple-fire-sign manner, I couldn’t let it go. So, when I decided to rebrand with a new website and portfolio, I knew that it was time to finally tackle the ever-elusive interactive image map. Here’s how I did it. 

What Is an Interactive Image?

All images can be linked to jump to another URL or another part of the page; however, the movement is limited to one page or one anchor. An interactive image is different because it has multiple linkable points within a single image, known as hotspots, with the final location based on where the user clicks on the picture.  

That’s how you get those cool, interactive portfolios you see on Pinterest. You know, the really aesthetic websites where you can click a pen on a desk and it takes you to a page or pop-up highlighting a project. They’re incredibly visually impactful and impressive as hell. 

But—and there’s always a but—the aesthetic portfolios that make the rounds are usually made using Readymag, which is a user-friendly website builder designed for non-developers. It takes a design-forward mentality, but historically, it’s not very SEO-friendly. As such, it’s not the ideal platform for SEO-focused content marketers. Instead, on our side of the industry, we usually rely heavily on WordPress.org because the algorithms favor it and the SEO WP plug-ins, like Yoast and RankMath.

For that reason, I needed to find a way to get that Readymag functionality without sacrificing SEO. And…*drumroll please*.. I did it! For FREE. No greater words could be said to this budget-thriving lady. 

How to Create an Interactive Image for Free (With Hotspots)

Inspiration

To bring my dream portfolio to life, I started with the image that would serve as the foundation of the project. My design inspiration came largely from Pinterest, and I found that I was most drawn to imagery that was related to creative spaces, like desks and notebooks. In the end, I opted for a corkboard.

[Tip: If you still want to use Pinterest for design inspo without the trashy AI images, change your settings to block them! A few will get through, but you’ll mostly get real-world visuals to help create your next moodboard.]

I’ve had a corkboard nearby since I was in middle school, and it’s been a staple in every home office along the way, serving to hold various sources of inspiration, from moodboards and photographs to artwork and to-do lists. (I’m literally staring at it above my desk as I type this blog.) For that reason, it felt like the perfect match to showcase my work online, which I ended up titling “The Board”. 

Planning

Learn from my mistake and take time to plan out what you want linked to your interactive portfolio image before you start designing. Otherwise, you’ll end up like me, having to stop and start the design process to layout, write, and build out pages for each portfolio item. It took much longer this way, so I’d recommend starting with a full outline, then deciding how you want to show it off. 

For my writer and creative strategist portfolio, I chose to make items link to an overall skill or a single project theme, like queer horror editorial writing or a B2B SaaS case study. So, along with knowing how many individual hotspots I needed on The Board, I also needed to create the landing page for each item. 

Going this route involved designing a page and creating the content for each. Instead of a traditional blog or article arrangement, I opted to make each example into a small, digestible case study with information separated by tabs labeled: Challenge, Approach, Solution, Results, and Why This Matters or Sales Enablement. Having all this laid out ahead of time would make the graphic design process much smoother. 

Design 

For the image to work as an interactive base, it simply needs to be a PNG or JPG. I opted to create mine in Canva. It’s a favorite of mine as I use it daily and know my way around. 

I started with a size of 2240px by 1260px, which is the same sizing I used for full-width imagery across the site. Since I have Canva Pro, I can save PNGs with a transparent background, meaning that I can create a design with some overhang elements for aesthetic purposes. 

If you’re working on the free tier, the design simply needs to be edge-to-edge of the image, or the background color needs to match the page where its going to live. The former option ensures you don’t have to update the image, resave, and reupload anytime you decide to change the background color of the website. Food for thought. 

The first step in bringing the interactive image to life was selecting a corkboard. I opted for an image option to get that hyperrealistic appearance that I’m drawn to as a viewer/user. Once it was set, I started choosing items that I thought I’d put on my board in real life, including pictures, concert tickets, and crosswords. I even ended up adding bunting as a visual homage to my current life in London. 

Plug-In

There were a few different options for WordPress plug-ins that offer interactive image features, but many of them are paid services. I, in all my DIY/budget-savvy glory, wanted to keep it free, which led me to Draw Attention. The WP plug-in is free for a single image per website. Since I only needed one interactive image, I knew it’d be the right option for my needs.

After installing and activating the plug-in, clicking on the “Draw Attention” label on the sidebar within the dashboard allows you to customize the settings. First, I uploaded my corkboard image, then changed the various color elements to match my branding. 

The main process is simply adding hotspots to the image and providing the necessary details. The “title” is the text that pops up when the user hovers over that specific hotspot. While I had each item direct to a specific URL, it’s also possible to “show more info”, which essentially involves a text box offering more information. All in all, I added 12 hotspots. 

My Portfolio Design Toolkit:

• Pinterest (Design inspo)
• Canva
• WordPress (.org)
• Draw Attention Plug-In

Explore My Interactive Image Map 

My interactive portfolio is live and ready to explore. During this proces, I have learned a few things to consider in the future. For one, a higher-quality image is necessary even at the risk of impacting load times. But overall, I’m happy where I landed for my first attempt.