How to map an image (put more than one link on one picture)

Posted on Jul 5 2013 - 7:00am by Markell

mapanimageOne 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. 

imagemapstep1

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

imagemapstep4 

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.  

imagemapstep5 

Click “Get The Code” 

imagemapstep7

 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! 

 

 

Share

27 Comments so far. Feel free to join this conversation.

  1. Stephanie July 5, 2013 at 8:17 am - Reply

    This was very helpful! Thanks for sharing 🙂

  2. Life With Lorelai July 5, 2013 at 12:44 pm - Reply

    Nice "How To" on Image Mapping I will definitely being trying this out. Thanks.

    I'm here from the Mommy Mingle Blog Hop 2, and I'm Following you on Bloglovin! 🙂

    • amouseinmykitchen July 5, 2013 at 5:57 pm - Reply

      Thanks for the follow and thanks for stopping by! I headed over to check out your blog now.

  3. Just a Girl Abby July 5, 2013 at 5:27 pm - Reply

    You are brilliant! Thanks so much for this helpful tutorial! Pinning! I popped over from Tatertots and Jello–thanks for sharing!

    ~Abby =)

    • amouseinmykitchen July 5, 2013 at 5:57 pm - Reply

      I'm so glad you liked it! I was super excited when I figured this out.

  4. Kirsten July 5, 2013 at 9:00 pm - Reply

    I've been trying to use image-maps for a week or so now and I was able to use it in my sidebar but I'm having issues using it in post. The text links at the bottom of my collage work just fine, but the image itself isn't working. It doesn't appear to be working in this post for you either with the social media icons. But they work on your sidebar. Any thoughts?

    • amouseinmykitchen July 5, 2013 at 9:34 pm - Reply

      I actually didn't put the map in my post, just the image. The only thing I can think of is did you unclick the base URL box? Also, when you're mapping the image, make sure you put http://www. in front of the website and click "test link" If it doesn't work there, it won't work in your map either.

  5. dishofdailylife July 6, 2013 at 11:16 am - Reply

    I need to sit down and read this when I can really concentrate! Found you on the Night Owl Venting Blog Hop. New follower!!

  6. dishofdailylife July 6, 2013 at 11:19 am - Reply

    Hmmmm…I guess my comment didn't go thru. What I was saying is this is really helpful info and I need to sit down and re-read when I have time to really concentrate! I pinned it and I am following you now. Visiting from the Night Owl Venting blog hop.

  7. megan July 9, 2013 at 7:26 am - Reply

    Love this! Learning to image map was the best thing when I was designing my blog. Everyone needs to know this! I would LOVE for you to share this over at my link party, Ginger Jamboree! I also have a great giveaway going on that you should enter!

    • amouseinmykitchen July 9, 2013 at 9:18 am - Reply

      On my way there right now! Thanks for stopping by.

  8. A Little Claireification July 9, 2013 at 9:25 am - Reply

    Fantastic tips!!
    Thanks for sharing this at our "Best Of The Weekend party"! I have pinned your project to our party board and another one of my boards too. We hope to see you again when the party kicks off Friday eve at 8PM EST.
    Have a great week!
    xoxo

  9. Les July 9, 2013 at 5:56 pm - Reply

    Thank you! Just what I needed!

  10. Elena July 11, 2013 at 4:16 pm - Reply

    OMG, I always wondered how to do this!!!! Awesome post; I am pinning right now and printing out :o) Thanks so much for sharing!

    croppedstories@gmail.com http://www.croppedstories.blogspot.com

    • amouseinmykitchen July 11, 2013 at 7:29 pm - Reply

      I\’m glad that it was so helpful to you! It\’s a super nice thing to know how to do, huh! Thanks for stopping by.

  11. Corinna August 17, 2013 at 8:10 pm - Reply

    Thank You SO MUCH for this! <3
    I've used your tutorial and the site you recommended to make my own multi-functioning header 🙂

    XO,
    CorinnaAshley.com

  12. 9.99 October 9, 2013 at 8:24 pm - Reply

    It is in reality a nice and useful piece of info. I’m satisfied that you just shared this helpful info with us.

    Please stay us up to date like this. Thanks for sharing.

  13. Elvia December 13, 2013 at 5:28 pm - Reply

    Good day I am so glad I found your site, I really found you by mistake, while I was browsing on Digg for something

    else, Nonetheless I am here now and would just like to say kudos for

    a marvelous post and a all round entertaining blog (I also love the theme/design),

    I don’t have time to look over it all at the moment but I have book-marked

    it and also included your RSS feeds, so when I have time I will be

    back to read a great deal more, Please do keep up the great job.

  14. free psn generator codes February 13, 2014 at 10:28 am - Reply

    You’re so cool! I don’t suppose I’ve read anything like that before.

    So great to find another person with some original thoughts on this topic.
    Really.. many thanks for starting this up. This site is something that’s needed on the web, someone with
    a little originality!

  15. last Minute cruise Deals February 18, 2014 at 2:31 pm - Reply

    Yesterday, while I was at work, my cousin stole my iPad and tested

    to see if it can survive a forty foot drop, just so she can be a youtube sensation.

    My iPad is now destroyed and she has 83 views. I know this is totally off topic but I had to share it with someone!

  16. somanabolic muscle maximizer workout February 25, 2014 at 10:29 pm - Reply

    Hello there, I discovered your blog by the use of Google while searching for a related
    matter, your web site got here up, it seems great. I’ve bookmarked
    it in my google bookmarks.
    Hello there, just become alert to your weblog thru Google,
    and found that it’s really informative. I am going to be careful for brussels.
    I will be grateful if you continue this in future. Numerous other folks can be benefited out of your writing.
    Cheers!

  17. harga launching yamaha r15 March 17, 2014 at 12:57 pm - Reply

    Howdy! I understand this is somewhat off-topic but I needed to ask.

    Does managing a well-established website such as yours require a massive amount work?

    I am brand new to blogging however I do write

    in my journal everyday. I’d like to start a blog so I can easily share my own experience and

    thoughts online. Please let me know if you have any recommendations or tips for brand new aspiring blog owners.

    Appreciate it!

    • amouseinmykitchen March 17, 2014 at 3:29 pm - Reply

      Hey! It doesn't require a TON of time now, but getting it all set up in the beginning was hard work. I recommend starting with blogger and seeing how you like it from there! Thanks for stopping by!

  18. Usually I don’t read post on blogs, however I wish to say that this write-up very

    compelled me to check out and do so! Your writing taste has

    been amazed me. Thanks, quite great article.

  19. tabletki odchudzajace skuteczne March 26, 2014 at 3:05 am - Reply

    It’s awesome to go to see this web page and reading the views of all colleagues regarding this paragraph,
    while I am also eager of getting know-how.

  20. viagra March 27, 2014 at 3:34 pm - Reply

    My spouse and I stumbled over here different web address
    and thought I may as well check things out. I like what I see so now i’m following you.
    Look forward to exploring your web page repeatedly.

  21. Mollie April 1, 2014 at 10:07 pm - Reply

    Great post however I was wanting to know if you could write a

    litte more on this subject? I’d be very thankful if you could elaborate a little bit more.

    Many thanks!

Leave a Reply to Just a Girl Abby

Click here to cancel reply.