One thing I realized quickly after I started blogging was that there are a lot of things that I don’t know. I started seeing other blogs that had social icons that seemed to be one picture, but with links to lots of different places. At first, I thought they were just uploading lots of pictures and setting them next to each other, and I tried doing that, but it didn’t work. Sometimes, one of the links would go on the next line, or wouldn’t line up just right. I realized there was a trick that I didn’t know about. So, I did some searching, and I figured it out. So, I decided to share with you all how to map an image.
First of all, I found out that what I was trying to do was called image mapping. You map out an image so that when you click different parts, it goes to different places. The website that will help you out with this trick is image-maps.com.
Before you go to that website, you first need your picture. For this tutorial, I’ll show you how I configured my social media icons. I downloaded these icons from carrieloves.com. I used Photoshop to put them all into one picture, then I changed the color so it would match my layout, deleted the background, and saved it as a .png file so that there would be no background, just the circles.
So, now, I’ve got this:
And what I wanted was for my readers to click the twitter icon and go to my twitter account, pinterest icon and go to my pinterest account, etc. So, my next step is to go to image-maps.com and get started.
It’s pretty simple, and it’s free. No signing in or anything.
The first step is to upload the picture.
Just click the chose file box and upload your picture.
Click the “start mapping your image button”
Deselect the base URL box and the Show Text Link box
Select the “rectangle” box
Adjust the rectangle so that it fits where you want it. Add the destination link in the text box below. Click save.
Repeat this step until all of your links have been added.
Click “Get The Code”
Don’t worry about signing in. Just click the tab that says “HTML CODE” and copy and paste your code.
Now you have your map!
Install it on your website wherever you want it by copy and pasting it. Check it out and make sure all the links work.
There is still one more thing you need to do. The image-mapping website doesn’t save your pictures for more than a couple days so you need to host it on another site. I use photobucket. Simply upload your photo to your photobucket account and copy the direct link. Go to back to your code and find where it says src=”http://www.image-maps.com/uploaded_files/xxxx”. Deleted from the http to the end of the link and paste your photobucket code in. If you don’t do this, your image will be deleted and it won’t work.
I hope this helped you! Let me know where you use it so I can come check out your handy work!