How to Add Multiple Clickable Areas to an Image

Multi Link Clickable Images

Most people know how to add one link to an entire image, but did you know there’s a way to selectively add multiple links to certain areas of your image? Adding multiple links to different parts of an image is very useful for product round-ups, and linking directly to items in photos. It’s super easy and quick to do online using HTML and doesn’t require any coding knowledge.

Personally, I started to research this capability because I wanted to use a combination of RewardStyle links and my own Amazon links in the same product round-up post. The “Money Spot” widget by RewardStyle only allows you to link to products on their platform and I used that widget for a while, but after I ran into some trouble with their “Boutique” widget disappearing from my posts, I started to move away from using RewardStyle widgets and host the images on my blog directly.

Creating the links on your own is way better for several reasons: you have control over the image, the links, everything. If you want to change or update a link, it’s super easy to do without going through RewardStyle. If RewardStyle servers go down temporarily, then so do your images. Maybe you want to link to a product that isn’t featured on RewardStyle, or you want to link using a different affiliate network (like me with Amazon). In all of these cases creating your own image is the way to go.

Set Up Your Blog

What we’re going to do is create an Image Map, which basically tells your readers’ browser which sections of the image are going to be linked and where.

To get started, install this Responsive Image Maps plugin. This plugin helps keep the links aligned to your photo no matter what size the user is viewing it on their browser (mobile, tablet, etc.).

Upload Your Image

Next, upload your image to your website and copy the full .jpg URL. To do this, simply upload your image like you normally would, go to to the Text editor as opposed to the Visual one, and then find where your image is. Copy the .jpg URL as seen here:

How To Find The Jpg Url In WordPress

Once you’ve got the URL copied, head on over to this website:

From here, select “Load Image from Website” and paste the URL from your image.

Create Your Hotspots

On the next page, you’ll be asked to draw boxes around the areas where you’d like to link. Click on the top left area of your first link. Then click on the bottom right spot where the box will end. A box should appear connecting the two dots. You can easily click and drag the dots to adjust them.

Adding Multiple Links To Sections Of An Image, Multiple Links on One Image, Clickable areas on an image, Add links to different parts of an image, Links on sections of an image

At the bottom of the page, you’ll see the option to add a title and a link to the box you just drew. This is where you can add your affiliate URL and give your link a title to remember later on if you like.

You can repeat this as many times as you need by clicking “Add New Area.” Make sure the little circle to the left of the line under the “Active” column is selected as you are drawing your boxes.

Grab the Code

When you’re done, click “Generate Code” and copy the text in that field. Go back to your WordPress post, make sure you’re in the Text editor (not the Visual one) and then paste the code. Be sure to delete the image code that is currently there otherwise your image will appear twice.

When you click “Preview” in your post, you should be able to see that the image appears with the links you set!

Pretty cool, right?

Share This

Read Next:

Written by

I am a female entrepreneur from New York. I have a passion for all things digital and branding, which helped me launch multiple successful blogs in female interest categories like travel and interior design. On this blog, I share the most valuable insights I've learned while running an online business!

5 comments / Add your comment below

  1. Hi Victoria! Thank you for this informative post! Do you know if there’s a way to integrate this method with an email signature and multiple areas for different links? I tried the method you described with creating an html image and pasting it onto the signature body, but none of the clickable elements work. Thank you so much for any advice!!

    1. Hey Cecilia, I don’t know of a way, and honestly I wouldn’t recommend it because there are dozens of different email clients, each of which displays content differently. You’re better off creating individual image links for emails in my opinion!

  2. Hi Victoria! Every time I try and copy the code it adds a

    before the code which I can’t seem to remove. It has the effect of making the image non clickable. Any suggestions?

Leave a Reply