Something Swanky

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…
{Cookies & Cups}
Ever drooled over nice and neat, cute social media icons like these…
{Thirty Handmade Days}
Or had blog envy over a cute “About” box, like this one…
{Tatertots and Jello}

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.
   

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

  1. Aimee posted on June 12, 2012 at 8:38 am (#)

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

    • Jocelyn replied: — June 12th, 2012 @ 10:47 pm

      I with you Aimee…it sounds so easy to do, but I get dizzy thinking about all the html and coding and aaaahhhhhhh I can’t do it!

  2. suzyhomemaker posted on June 12, 2012 at 9:40 am (#)

    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. Dorothy @ Crazy for Crust posted on June 12, 2012 at 9:47 am (#)

    You’re amazing Ashton! Really. :)

  4. Simply AJ posted on June 12, 2012 at 10:52 am (#)

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

  5. Stephen + Natalie posted on June 12, 2012 at 2:47 pm (#)

    Love this!

  6. Julie posted on June 12, 2012 at 3:24 pm (#)

    Wow!! I am speechless…

    The Farm Girl

  7. sally @ sallys baking addiction posted on June 12, 2012 at 5:19 pm (#)

    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. Gretchen {NewFashionedMom} posted on June 12, 2012 at 7:32 pm (#)

    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. Natasha in Oz posted on June 12, 2012 at 9:18 pm (#)

    Pinning this right now! Great tutorial-thank you!

    Best wishes,
    Natasha in Oz

  10. Michelle posted on June 12, 2012 at 10:14 pm (#)

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

  11. Jocelyn posted on June 12, 2012 at 10:48 pm (#)

    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. cheapcraftymama posted on June 13, 2012 at 8:36 am (#)

    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. Sarah Carletti posted on June 16, 2012 at 6:42 am (#)

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

  14. Christina posted on June 18, 2012 at 12:49 am (#)

    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. Nina posted on June 18, 2012 at 5:16 pm (#)

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

  16. Sarah Jenkins posted on June 18, 2012 at 6:41 pm (#)

    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. KCoake posted on June 18, 2012 at 9:19 pm (#)

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

  18. Jelli posted on June 18, 2012 at 10:07 pm (#)

    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. Robin @ Happily Home, After posted on June 19, 2012 at 7:35 am (#)

    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. skye @ neathering our fest posted on June 27, 2012 at 5:17 pm (#)

    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. kat - The Organised Housewife posted on July 17, 2012 at 12:33 pm (#)

    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. angie in the thick of it posted on July 17, 2012 at 10:35 pm (#)

    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. Ashley Hathaway posted on July 20, 2012 at 12:58 pm (#)

    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. Steph @ Crafting in the Rain posted on July 20, 2012 at 9:53 pm (#)

    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. Brie - BreezyPinkDaisies posted on October 22, 2012 at 5:54 pm (#)

    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!!

    • Ashton replied: — October 25th, 2012 @ 3:11 pm

      Absolutely!

  27. Katie Clark posted on December 25, 2012 at 3:57 pm (#)

    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. Mary A posted on February 3, 2013 at 2:21 am (#)

    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. Hollie @ I'm Busy Procrastinating posted on February 24, 2013 at 10:59 am (#)

    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!

  30. Stacey posted on March 31, 2013 at 4:22 am (#)

    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/

  31. Anja posted on April 5, 2013 at 3:52 am (#)

    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 ;-)

  32. Marcia posted on April 7, 2013 at 8:36 pm (#)

    Amazing! Thanks for the tutorial. I’ve always wondered if there were an easy way to do this.

  33. franci posted on April 11, 2013 at 11:04 am (#)

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

  34. sunithi posted on April 11, 2013 at 11:32 pm (#)

    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.

  35. Garthen Leslie posted on May 4, 2013 at 11:08 am (#)

    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

    • Ashton replied: — May 18th, 2013 @ 10:23 pm

      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. Robin @ Bird On A Cake posted on June 22, 2013 at 4:39 pm (#)

    Used this post to fix my social media icons today – they had stopped working. Thanks, Ashton!!!!

  37. Allison posted on August 28, 2013 at 1:07 pm (#)

    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 :)

    • Ashton replied: — August 29th, 2013 @ 11:32 am

      So Sorry! I don’t have a solution for you. If you figure it out, let me know!!!

  38. Sandra posted on September 7, 2013 at 9:46 pm (#)

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

  39. Chris posted on November 5, 2013 at 7:22 pm (#)

    Thanks so much for this post! I’ve always wondered how to do this w/o Illustrator or Photoshop. Now I do. :)

  40. emily posted on December 29, 2013 at 12:53 pm (#)

    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?

    • Ashton replied: — December 31st, 2013 @ 3:58 pm

      Adjust the width of your blog :)

  41. Tonya posted on December 30, 2013 at 7:05 pm (#)

    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. Geeta posted on January 2, 2014 at 11:30 pm (#)

    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. Kaylee @ The King and I posted on January 9, 2014 at 3:22 pm (#)

    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 :)

  44. melissa posted on March 18, 2014 at 7:58 pm (#)

    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 !

    • Ashton replied: — March 18th, 2014 @ 10:06 pm

      I haven’t used it lately, but I have heard about the changes! Major bummer!!

  45. adAstra @Flexines posted on March 29, 2014 at 5:14 pm (#)

    Awesome, that’s exactly what I needed and couldn’t find in a Google search! (Here from Sverve) Thank you!

  46. Sharon posted on April 6, 2014 at 10:44 am (#)

    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.

  47. Amy posted on April 11, 2014 at 1:20 pm (#)

    You are the most helpful thing I have run into all week! Thanks so much!!!

  48. Fenja posted on July 5, 2014 at 1:12 pm (#)

    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/Pingbacks

  1. Pingback: Guilt-Free Blueberry Muffins - Kitchen Meets Girl

  2. Pingback: Making Your Blog Look Its Best | Better Blogger Network Blog

  3. Pingback: Blogging: 10 Steps to Getting Started on WordPress - White Lights on Wednesday

Leave a Comment





Current ye@r *