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

SomethingSwanky is reader-supported. When you buy through links on our site, we may earn an affiliate commission at no extra cost to you.

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, https://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.
« Previous Post

Nesquik Buttercream Cupcakes

Next Post »

{Skinny} Frozen Hot Chocolate Cupcakes

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

  1. 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?

    Reply
  2. 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!

    Reply
  3. 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

    Reply
  4. 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 🙂

    Reply
  5. 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!

    Reply
  6. 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/

    Reply
  7. 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 😉

    Reply
  8. 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.

    Reply
  9. 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

    Reply
    • 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 🙂

      Reply
  10. 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 🙂

    Reply
  11. 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.

    Reply
  12. 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

    Reply
  13. 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 🙂

    Reply
  14. 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 !

    Reply
  15. 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.

    Reply
  16. 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

    Reply

Leave a Comment