Image Mapping | How to add mulitple links to a picture

Image Mapping | How to add mulitple links to a picture

I have a non beauty post for you all today. Ever wondered how to add multiple links to a single picture? I wondered the same thing, until I discovered the answer was 'Image Mapping' Well today I'm bringing you a how to on Image Mapping.

Looking around my blog you might find a few pictures that when clicked, can take you to various different web pages. I had seen these on a number of different blogs and websites, I loved the look of them and therefore needed to know how to do this. I didn't know what it was called, so my best friend Google pointed me in the right direction. I stumbled across various different image mapping websites, but the one I have been returning too is all the features that I need are free, which is great, as ideally I didn't want to pay out for a subscription.

For me being able to design an image myself and making it multi-functional has enabled me to be a bit more creative when designing my blog and allowed me to put my Julie stamp my blog!! I received numerous comments on how I created the picture that is in my 'Contact/PR' tab just HERE so I thought I'd use that to show you how I created it. Don't worry I'm going to tell you step by step how I created it and I've even thrown in some pictures to make it even easier :)

Image Mapping | How to add mulitple links to a picture

  • Step 1.  Upload the picture you want to image map from your computer/laptop and then press 'start mapping'

Image Mapping | How to add mulitple links to a picture

  • Step 2. Right click where you want the first link to go. For me Twitter was the first link. A menu will pop up on the screen, depending on the layout of your image you can choose what shape you want the image map links to be. As my image is straight, with nothing fancy on it I chose 'Create Rect'

Image Mapping | How to add mulitple links to a picture

  • Step 3. A new menu will pop up on screen, as will a little square box. You may need to move the menu out of the way if it's covering the image up. Now you want to adjust the size of the square box to the size of each word. You will see that I made the box just a little bit larger than the Twitter icon and word. 
  • Step 4. You need to add the link to the corresponding website. I added my Twitter URL and then wrote the word 'Twitter' in all of the other boxes. Then press 'save' and repeat steps 3 and 4 until you have added all the links you need to.

Image Mapping | How to add mulitple links to a picture

  • Step 5. The red boxes are the area in which anyone can press within that box and be taken to the desired link. Make sure you leave a big enough space between each box/link so that it's easy to navigate. Once you have completed all links right click and the same menu will pop up on screen. First you obviously want to save your work, then you press 'get code' which will open up the next menu on the below picture

Image Mapping | How to add mulitple links to a picture

  •  Step 6. Go to the 'HTML tab' scroll down and then you will find the image map code. Highlight every bit of the code and copy it to your dashboard.

You will then need to find the HTML gadget (on blogger) or widget (on other plaforms) and add it to where ever you want the picture to be placed within your blog layout, and that's it, you have fully completed image mapping! To see how it works, just click on all of my social media icons below and you will be taken to each website!

Image Mapping | How to add mulitple links to a picture Twitter Bloglvin Pinterest facebook Instagram Google+ JustJulie Image Map

I think it's so clever and it's a great way of being a little more creative on your blog. I have several pictures image mapped. Within my header, the pink social media icons will take you to my social media platforms. On my right bar, under JustJulie Categories, I have another picture, although this will take you to each of my categories that I have added pages for within my blog, so that if anyone wants to look for say just makeup looks or hauls, they can just navigate their way through to those exact posts.

I hope you have found this useful and that I have shown you a different way of adding links to your blogs, instead of just normal writing. If you have any questions then feel free to leave them in the comments or drop me an email.

Until Next Time

Where Else Can You Find Me?
 Twitter | Facebook  | Bloglovin | Google + | Pinterest | Instagram

JustJulie has been shortlisted for the 'Best New Beauty Blog' category in the 2014 Cosmo Blog Awards. If you enjoy my blog you can vote for me to win just HERE Please ensure you keep pressing NEXT until you can input your name and email. Only then will your vote be submitted.


to top