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:
Once you’ve got the URL copied, head on over to this website: image-map.net
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.
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?