For those you that are visual learners, I’ve got a treat for you. Ever wonder how to create clickable image collages for your blog, but haven’t been able to figure it out? Today, I’m going to show exactly how to create clickable images for your blog with lots of pictures!
*Not all images above collage are clickable.
Before we get started, you’ll need to create your picture collage – I use PicMonkey to create my collages. Once your collage is created, save it to your computer and upload it to your media library on your website or image hosting site (Photobucket). Next, go to Image-maps.com* to start making your collage image clickable. Click on the “Browse for File” button and upload the collage image you just created on PicMonkey. *You do not need to login or register to use this site. When your image is uploaded, click on the “Start Mapping” button. Click to continue. Hover your mouse arrow over an image in your collage and right-click it. A mapping menu box will pop up. Click on “Create Rect”. Left click the image you want to frame and a plus sign will appear. Click on it and drag the edges of the frame box to fit your entire image. You will also need to insert the URL of the image blog post (the link where you would like the image to direct your readers) and the title of the image blog post. Repeat these steps until all of your images are mapped.
Next, click on ‘Events’ tab and change the target to ‘_blank’ and save.
Once everything is mapped, right-click the page and the map menu will pop up again. Click on “Get Code”.Click on the HTML tab and scroll to the bottom of the box – HTML Image Map Code. Copy that code and paste it into your blog post in text mode.
Now, copy and paste the entire HTML Image Map Code and insert it into your blog post in the text mode. The pasted HTML code should show up as a clickable image in visual mode.
*Not all images are clickable in the image above.
Hope you found this tutorial helpful.
Note: Some PIN IT plugins will interfere with clickable images, especially those that pop up in the center of the image.