Using Image-Maps to Link Multiple URLs to Just One Image {and why that’s so cool!} posted by Something Swanky Pin Share Tweet Email 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… {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, https://staging.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! Please visit my Party Page for a more complete index of Link Parties.
Oh my you make this look so stinking easy. I know you say it is, but geesh it’s all so overwhelming to me 🙂 Reply
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! Reply
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? Reply
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! Reply
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! Reply
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
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! Reply
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
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} Reply
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. Reply
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. Robinhappilyhomeafter.blogspot.com Reply
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!!!! Reply
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 Reply
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! Reply
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! Reply
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 Reply
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 Reply
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!! Reply
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
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!!! Reply
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
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
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
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
Does this tutorial help you any? https://staging.somethingswanky.com/2012/06/2-different-ways-to-make-custom-header.html Reply
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
Used this post to fix my social media icons today – they had stopped working. Thanks, Ashton!!!! Reply
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
Thanks so much for this post! I’ve always wondered how to do this w/o Illustrator or Photoshop. Now I do. 🙂 Reply
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? Reply
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
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
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
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
Awesome, that’s exactly what I needed and couldn’t find in a Google search! (Here from Sverve) Thank you! Reply
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
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
