Using Image-Maps to Link Multiple URLs to Just One Image {and why that’s so cool!}

If you’ve already read my creating your own social media icons tutorial
this post is going to be sorta old news.
But, I’ve been getting lots of questions that can all be answered with a single tutorial on how to use image-maps.com. So if this is repeat info for you, just smile and nod and give it a pin for me anyway, won’t you? Thanks. You’re a peach.
Image-maps.com is a free site that maps out the coordinates of YOUR image so that you can easily link up multiple URLs to that one image.
So what’s the big deal? Why do you want to be able to do that?
I’ll tell you why: because it looks cool.
Ok, ok that’s not the only reason. Functionality does play into this a little.
Alright– a lot. But here, why don’t I show you:
Have you ever wanted a header for your blog that looks like this…
Ever drooled over nice and neat, cute social media icons like these…
Or had blog envy over a cute “About” box, like this one…

Well, I’m here to tell you: you don’t have to just dream about these types of features on your blog– 
you can do it yourself!
Yes, yes… our blogging friends I’ve just mentioned above appear to have all had some help from exceptional designers. They have beautiful graphics. They have custom fonts. Yes. That’s all true.
(You can have all that too, if you just know where to look– but that’s a post for another day.)
But the point is: look at those blog designs closely. What do you see?
It’s all just basic images and text! So what makes it special?
The location of the links!! It’s all about the flexibility to put social icons in the header, or to streamline “about,” “buttons,” and “sponsor” all in to one gadget.
Anyone can use Picmonkey to make a pretty picture.
But you need to know how to link it all up for it to actually be functional on your blog.
And that’s what image-maps does for you.
So just to prove my point, and to provide a step-by-step photo tutorial for you, I’m going to re-create [a lazy version of] Jen’s fabulous “about” box up there by using Picmonkey.com and Image-maps.com.
(there are a couple of limitations, but I’ll address them as they come…)
I won’t be covering Picmonkey basics in this tutorial. If you want to learn how to start an image from “scratch” or to learn about some of their cool features, check out my other design posts. I also won’t be addressing where to find social media icon graphics. See this post.
1. Creating the image in Picmonkey.com goes like this…

2. Save to your desktop as a .png file.
3. Upload to a blog post or to picasa, photobucket, etc… in order to create and obtain an image URL.
4. Go to www.image-maps.com and upload your image URL.
5. Click on Rectangle. Use the rectangle that appears to highlight the first area that you’d like to link. For example, I’m going to start with “About.” I’ll highlight “About” and link it to my about page (ie, http://www.somethingswanky.com/about).

6. Continue to highlight and link each section that you want linked.



7. Make sure to uncheck the “Show text links” box.

8. Click “Get Code.”

9. Click on the HTML tab and copy your code. Paste it into the gadget box of your choice (sidebar, header, etc…)

I mentioned there are certain limitations when you design using this method–
I’m simply referring to the fact that you aren’t able to write an HTML code for different features like drop down menus, or switching from tab to tab. This method only allows you to link to ONE flat image. Which is why the example I just did wouldn’t really be optimal for a blogger blog– unlike Jen’s, we can’t highlight different tabs. 
We can only click on the text to be taken to the corresponding link.
But even taking that limitation into consideration, it’s still pretty cool to have way more design possibilities open up with image-maps.com and Picmonkey!
Go design and have fun!

Featured on BlogHer.com

Please visit my Party Page for a more complete index of Link Parties.
If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Comments

  1. Oh my you make this look so stinking easy. I know you say it is, but geesh it’s all so overwhelming to me :)

  2. This is a great tutorial. Would this also be a way to make a picture collage and have the picture link to the original posts?

  3. You’re amazing Ashton! Really. :)

  4. Good Stuff! Thanks for breaking it down for us. AJ@queenofmynest

  5. Love this!

  6. Wow!! I am speechless…

    The Farm Girl

  7. Ashton, what a helpful post! I had NO idea making my own combination of links + pictures was so easy. I hired someone to help me with my site! I love these kinds of posts – I learn so much!

  8. Omg!! I don’t think you understand how much you just changed my life!! I’ve been trying to figure this out forever!
    Seriously, you deserve a brownie sundae or something! Thanks so much!

  9. Pinning this right now! Great tutorial-thank you!

    Best wishes,
    Natasha in Oz

  10. Thanks for the tip and I just pinned it! :)

  11. It truly does sound easy to do…but my computer challenged brain shuts down when I start to work on it. I saved some clip art to use…it’s a start right?

  12. I have wondered about that a lot– thanks for sharing this great info! I would love for you to share this (and any other creations) at Pin It and Win It Wednesday @ http://www.cheapcraftymama.com!

  13. This is great. I’m bookmarking for later use!

  14. this is pretty amazing! had no idea you could DIY an about box social media icons in a header like that! hoping to work on creating mine soon!

    thanks for the great tutorial!

  15. Thank you!!! I was able to make an icon bar all liked up. I can’t believe it!!!!

  16. Thank you for this!! I’m your newest follower and I’d love for you to share this on Tuesday’s Tidbits @ Naptime Delights: http://naptimedelights.blogspot.ca/2012/06/tuesdays-tidbits-link-party-5.htmlThanks so much!
    Sarah
    {http://naptimedelights.blogspot.com}

  17. Thanks for this. I am pinning it to find it later when I am ready to use it. Thanks!

  18. I read one of your past posts using this site and I LOVED it. Never knew before how easy it was to personalize my blog design.

  19. Ashton,

    Wonderful tutorial! I didn’t know about image maps for blogs but I will study your tutorial until I have this mastered and implemented :) {In my former life} I was an Instructional Designer / Writer and this tutorial knocks my socks off with your clear explanations and relatable examples, simple and concise writing. I know this post most of taken much time to plan and write. I’ve not visited your blog before but I’m so excited to explore and discover the treasure of resources I know are here. Thank you so much for sharing. BTW, found you via TipJunkie where I’m also partying.

    Robin
    happilyhomeafter.blogspot.com

  20. OMYWORD!! You just made my entire day!!! I have been searching and searching for a tutorial on this and crying because i couldn’t find one. I cannot WAIT to go home and try this out!! YEEE!!!!

  21. TO have wanted to add a tabbed widget to my sidebar but ant work it out this is the next best thing. Thankyou so much

  22. thank you sooo much for this! skye (rindercella) from nethering our fest sent me over here tonight and i am so impressed!! i can do this!! yay!

  23. Love this detailed tutorial and have been wondering how to do such a thing. Thank you for sharing and I hope to incorporate it soon!

  24. Thank you so much! I looked everywhere when I started my blog trying to figure out how to do this! Great Tutorial! <3 Hannah http://welivedhappilyeverafter.blogspot.com

  25. This was great–thank you!! I just updated my blog and used this tutorial for a couple of different images!!
    http://craftingintherain.blogspot.com/2012/07/blog-makeover-tips.html

  26. This is awesome! I think it’s time for me to make a new header with clickable buttons! I had no idea this would be something someone like me could do. Thanks so much for sharing!!

  27. Katie Clark says:

    Hey Ashton! So I just went to do this, but now pic monkey requires a paid subscription in order to use your own overlay…do you know if there is a free program where I could do that? i have a banner that I am using and wanting to put my social media icons on it :)

  28. Thank you so much for this tutorial! I made an about button today and was so excited I was literally jumping up & down:-) Thank you!!!

  29. I found your blog this week (via Pinterest, I’m sure) and while I am a total dessert freak, right now I’m reading post after post about prettifying my blog. It’s funny that most of us assume we can only have cool features if we have someone do a custom blog design for us. Thanks for sharing your knowledge in a step-by-step way. I’ll be implementing several tips to my own blog this week!
    Hollie @ I’m Busy Procrastinating recently posted..Inspiration from Ira GlassMy Profile

  30. Thank you so much for this tutorial! I just finished making my new menu header & it was a snap!!. I’ve checked & all the links work great. I’m not sure why I have a big grey bar above my header but I don’t think that has anything to do with this tutorial. LOVE that you so willingly share your information with all of us :) If you want to see what this tutorial created you can check it out for yourself. Thanks again!!!!
    http://www.renditionroad.com/
    Stacey recently posted..Weathered & Leathered Side TableMy Profile

  31. I just love this tutorial – this is something I’ve been drooling over (how could you read my mind like that) and that, given some time at the weekend, I will do as soon as possible. Thanks! In the meantime, I’ve pinned it to my Bloggy McBloggerson Pinterest board (yes, I use ridiculous names ;-)
    Anja recently posted..How To Truncate Your Blogger PostsMy Profile

  32. Amazing! Thanks for the tutorial. I’ve always wondered if there were an easy way to do this.
    Marcia recently posted..Spinning Journal Page and Sharing the Link LoveMy Profile

  33. thank you so much for this tutorial!
    it was very helpful to me! ❤

  34. Great tutorial. Didnt work for me though. Although the image mapping took place on the site, when I downloaded the html code into my blog and saved the image, the links wouldnt show on my header. Not sure what am doing wrong. Since this is a header I cannot upload html directly onto the header. It has to be an image. So, not sure how to download the image with the links.
    sunithi recently posted..How Is Your Diet Affecting Your Oral Health?My Profile

  35. Garthen Leslie says:

    I am trying to create a link to each section of a sports stadium. However, I am only able to get a certian number of links to work. Is there a limitation on hte number of links I can have using image mapping? Thanks

    • Not that I know of. But I do have issues occasionally on image-maps. Usually I just give it a day to “rest” and try again. Most of the time that works. Don’t ask why, I couldn’t tell you. But most of the time it does :)

  36. Used this post to fix my social media icons today – they had stopped working. Thanks, Ashton!!!!
    Robin @ Bird On A Cake recently posted..Peanut Butter Chocolate Monkey CakeMy Profile

  37. Hi! I have been using image maps for a little while now, mainly for my blog header and “favorite things” list. Recently I noticed that the maps themselves have been showing up as blue boxes whenever I click on a link. I can’t seem to get rid of them! Have you ever had this problem, or have any suggestions on how to fix it? I love image mapping, but this is driving me crazy :)
    Allison recently posted..packing it upMy Profile

  38. This is very good info that I am going to have to re-read a couple of times. Thank you!

  39. Thanks so much for this post! I’ve always wondered how to do this w/o Illustrator or Photoshop. Now I do. :)
    Chris recently posted..Sponsored PSA: Bacteria, Not Bugs – Support No-Bug Yogurt (Dannon)!My Profile

  40. hello please can you help, i used image maps for my blog banner but it always goes to the left side of my blog and I’d like it centered how do i do this?

  41. Hi, I have spent some time on your web-site trying to figure out how to make a header and nav bar. I made one and got all the way to the linking part in image_maps but have been having trouble getting the links to work. The site looks different from your tutorial too. I cannot figure out what I am doing wrong. I have been able to link either only one image or the last image but have had no luck with multiple images. I have googled and read and tried all sorts of things. I am new to this so maybe it’s something silly and small I am doing but I need help. Thank you for all your lovely tutorials.

  42. Hi Ashton,

    All of your posts are so helpful! I have a question though – I’m trying to make a nav bar through image-maps. I got to the end but after coping the code, the image doesn’t show up. I noticed when I went to get the code there’s a warning on image-maps that says I need to change the image source because “all non-hosted images will be removed within 24 hours.” Any idea how to solve this? Thanks for all the help!

    G

  43. Thanks for a great tutorial. Did you subscribe to image-map so that they host your image? I’m having a problem with getting the code and didn’t know if that was the missing step. Image-Mapping’s website has changed since your tutorial and looks a lot different so I wanted to make sure I was doing it right :)
    Kaylee @ The King and I recently posted..Holiday Craft-a-Palooza 2013My Profile

  44. Hey ! I have had this site bookmarked for a longggg time and use it often love it thanks! :)
    I just tried to map an image though and it looks like their site has changed some. I am so lost as to how to do this now. Have you used it lately? Any ideas…? Updates? Thanks so much !
    melissa recently posted..Chicken & Tomato Salad Stuffed AvocadosMy Profile

  45. Awesome, that’s exactly what I needed and couldn’t find in a Google search! (Here from Sverve) Thank you!
    adAstra @Flexines recently posted..Weekend Crush: Lora Hill, Fights Bullying with DanceMy Profile

  46. I am trying to design an email subscription box to go at the end of my posts with the social media icons in it also. Can I use this to create the box? I have been searching and searching for a way to create this because most of the subscription boxes I’ve seen don’t include Pinterest following. That’s why I’m still looking. Hopefully, I can use this tutorial for that.
    Sharon recently posted..Growing Potatoes in a Bag!My Profile

  47. You are the most helpful thing I have run into all week! Thanks so much!!!
    Amy recently posted..More Gratitude, Less AttitudeMy Profile

  48. Hi! Very nice your website, and I am using with love. So great that there is help out there :). I tried to use the image maps, however I cannot get it to link in Blogger. Because my header is an image, I don’t know where to add the HTML code of the image maps.

    Could you help me out with this? Many thanks!
    Fenja
    http://www.navigateontrust.com

Trackbacks

  1. [...] Kitchen Meets Girl wouldn’t be half the blog it is today if it not for Ashton.  Through her design tips, PicMonkey tutorials, and Online BlogCon, I’ve learned so [...]

  2. [...] A Great Tutorial on Image Mapping Free Blog Dividers (SO cute!) Free Beautiful Social Media Icons (Check out the black glitter ones…oooh) Happy Designing! [...]

  3. [...] at the very top and very bottom of your site.  I use this plug in for my header since it’s image mapped and to place my very top banner [...]

Leave a Comment

*

Current ye@r *

CommentLuv badge