Doing a round -up of some sorts? Creating a collage for it? Wouldn’t it be nice to have each picture linked to the original source (ie post or pin)?
Well today I am going to teach you how to do just that…
How to Add Hyperlinks to Collages!
Obviously, before you can do anything else, you need to create your collage as I did below.
Once you are finished, save it somewhere on your computer (although might good to remember where specifically :)).
Then go to Image-Maps.com and register for a free account.
After you have registered, go back to the home page and click on Browse for File.
A window will pop up and you will need to select the folder, the collage and double click.
When the collage is done loading, you will see it in the browser and will need to click on Click to Continue.
You’ll be taken to a new window in which you will only see the collage and the highlighted text above the collage. Click on Close.
It gets exciting now. Right click and select Create Rect.
A box will appear and you will need to both move it to the picture in the collage that you want to link and then expand such that the picture is boxed in.
I’m assuming you know, although assuming can be dangerous, that you will want to copy the URL for the page in which you want to link to the picture.
Paste that URL in the box to the right of the collage (under the Options Tab).
Don’t save yet. Stay in the box and click on the Events Tab and then select _blank under Target. This will ensure that when someone wants to click on the picture to be taken to the URL, it will open in a new window.
Then save and the tabbed window on the right will disappear. The picture will have a color filled box around it.
Continue the same steps until all pictures are linked to a URL.
If you notice above, even the title of the collage is color filled. That is because I linked it as well. Now realistically…I am not sure you would need to do that, but wanted to do so just for the sake of showing you that anything was possible.
After all pictures are linked to a URL, right click and select Get Code.
A window will pop up with multiple tabs. Select the HTML Code Tab.
Scroll down in that window to copy the code.
Paste it then in your Text Tab in your post window.
And you are done!
You then have a collage in which each picture has a link and you have now included it in your post. Test mine out below.
If you have any questions or get stuck, feel free to reach out to me directly either on my FB page or by direct email.
Karen Goodman says
This is a wonderful tip! I can see this really coming in handy for some many things. Can you only select a rectangle? I’ve been wanting a way to do something like this for my real estate site, having an outlined area on the map that would link to another page on the site. I know there are complicated ways to do this…I’m hoping for something as easy as your tutorial.
Stella Lee says
Sharing your great tutorial again :o)
denise designed says
Thank you so much Stella Lee!