How to Make Every Image in a Collage a Link

Written by: Anyonita Green on 3/20/2104

Collages have become a recurring component on many blogs: they're bloggers choice for displaying featured posts from link parties or when showcasing festive, holiday roundups. They look cool and homogenous and are a fun way to cram a lot of photographs into a single image.

One of the most annoying things about collages, though, is that there's never been an easy way to attach multiple links to them. So bloggers tend to default to having to place links beneath the collage either in clockwise manner or in correspondence with numbered photos in the collage. 

But I'm going to show you a relatively simple method for making every image in a collage a link. It doesn't matter what your collage is of and it doesn't matter if each photo will be assigned a different link. Here's one easy way to make every image in your collage a fully-functioning, clickable link.


Find more blogging tutorials to pin:

How to Make Every Image in a Collage a Link
Here is a five minute video on how to create a collage in PicMonkey, how to host the collage image on your Google Web Album and how to made each image into a clickable link:

And here is the result of our video:

No time to watch the video? Here's the transcript:

"Hi, in this tutorial today, I'm going to show you how to make every image in a collage a link. Lots of bloggers use collages for showcasing features from link parties or as the main image of a roundup that they might do. And being able to click each image and go directly to the image source is really handy and it looks a lot tidier and neater than having links beneath the collage. So, I'm going to take you through the steps from creating a collage (we're going to use PicMonkey to do that) to hosting the collage image and we're going to use our Google Web Albums to do that and then, finally, I'm going to show how to make each image a clickable link.

Creating a Collage with PicMonkey
"So on Picmonkey.com, you go ahead and click the collage option and you just add the photos that you want to use. And for the purpose of this tutorial, we are going to create a collage around some recipes that you can find on Anyonita Nibbles. So all the photos that we're going to use open up over here on the left and we simply drag and drop them into place ... like this. And once we have our photos how we want them,we click "save" and save it to our computer.

Hosting the Collage Image Online with Google 
"Next, we need to hose the image online. You can host on Facebook, in a private Facebook album, on Flickr or Photobucket. I prefer to use my Google Web Albums because everything stays central and I can put it in a private album as well and it's easy to find again. Okay, once you have uploaded your image, go ahead and right click on it and you want to get the actual image location or the image's URL. So "copy image location". And next we will head over to Image Maps.

Making Each Photo a Link with Image-Maps
"Now we are at image-maps.com and you want to paste in the URL and click "start mapping". Image Maps will bring up a little preview of the image and if you're sure that that's the one that you want to map, click "click to continue" ... and you've opened up the work desk.

Uh, you can close this [yellow bar at top of window]. And you right click and you want to "create rect" or create rectangle. Go ahead and move this box [image map box] out of your way so you can see the whole image. And then you simply drag and resize the boxes as needed to fit the photo.

Once you've done that, you copy and paste the link that you want that photo to go. Right there, where it says "map URL" paste the link we want. And under "event" under "target" if you change it to "_blank", all of your links will open up in a new window or tab.

And to continue, you just do the exact same thing again: right click, create rectangle, draw your shape and then here ["map URL"] you'll paste in your link. I'll go ahead and finish this up. Okay, once your collage is finished, you right click again and choose "get code".

You click the second tab that says "HTML code" and then you scroll down until you see the HTML code and you copy and paste. And here's your finished product! And if you click on an image you'll be taking--you'll be taken to the post! And that's it. Now, if you follow this tutorial, leave me a link in the comments to your collage, I'd love to come take a look at it! Thanks!"

If you follow this tutorial, please leave me a link and show off the fabulous collage(s) you make! I'd love to take a look at them!

Here are more blogging tutorials you may find helpful: