How to create multiple links on one image

You see my blog title up there and the little thingy options underneath? Well, I actually made it myself! Instead of having a generic horizontal navigational bar, I decided to try out my amateur graphic designing skills.

Why? Well, because, let's be real, some of the basic navibar options can look like a sack of potatoes. Just...there. Wah-wah.

So I thought, "HEY! Why don't I just create multiple links in one image to make my own navibar?"

So I did. I live life on the edge, people.

I promise this tutorial is going to be so easy. You may even have some of your hair left and only a little bit of mascara stains from crying, it's going to be that good.

This tutorial will be for building a design from scratch. If you don't want to do this because you already have your image you want to map, then skip steps 1 & 2



1. Go to paint and save it as .JPEG. Don't do anything to it, just leave it blank.


2. Go to PicMonkey and click "edit a photo". Open up your blank .JPEG that you saved and get creative. Play around with the stamps and whatnot.  

What I did for the image below was create a texture, added words, a graphic, faded them a bit and voila!
If you need to, resize or crop it to fit what you want. 
Save it.


3. Go to www.image-maps.com and upload it there. It will load for a bit, have you click a "continue" button, and then it will go to a page that looks like this:


Then make sure you do the highlighted items which is to change the URL to your own and uncheck the box that says "show text links".



4. Now you can begin mapping. Click the "rectangle" box  and highlight the part of your image you want to be linked. Then put in the URL you want that part of the image to be directed to. Leave the "title/alt for this map:" blank and then click "save"

Repeat this step until you have everything linked that you want.


6. Click on "Get Your Code" button and then on the "HTML Code" tab in the upper left. Copy all of the text and paste into an HTML Widget on blogspot!


Once you update that, all should be good and wonderful in the world!

You can do so much with this. Make your own navigation bar with custom pictures for each page, or....
pretty much that's all I can think of right now because that's all I've used it for.

Good luck and show me all of your awesome map image links you make!

13 comments:

Lisa @ Two Bears Farm said...

Interesting tutorial - I'm not always so good with this sort of thing.

Rachel said...

Yay you are awesome! Thanks for sharing this!!!

happySTACYashworth said...

This is very cool! I'm so glad I ran across this tutorial on Pinterest! I'll let you know if I try it out. I hope to one day. :) Take care.

Autumn said...

I have used this a ton since you posted it! Thanks for posting it :)

Becky Smith said...

Great job of explaining what seemed to me to be an impossible task without being technically savvy.I'm excited to try it!

Thanks for taking the time to put this together; I truly appreciate it.

Angela Bain said...

Awesome tutorial! Thanks. :)

Kayelle Allen said...

OMG you're right. I do still have some hair left! ^_^ That was fun. Thank you, thank you.

Lila Stein said...

I still don't understand it. How do I build it into my blog? I have created a HTML-gadget, but nothing seems to work.

Nikki Coglio said...

This is so helpful! Thank you, I can't wait to try it out!

Shari Lynne @ www.faithfilledfoodformoms.com said...

Ok..You totally ROCK!! Thank you so much!!!! Have a blessed day!

Michelle Amadeus said...

Wow, thanks! It helps a lot. Succha awesome post, and... I really like your blog design, really inspirative ;)

Homewood Nursery said...

Almost worked. I did the image in photoshop, followed directions, and it imported with the links but the image didn't show and instead rendered as a broken link. The links worked, though, when I hovered over the appropriate area and clicked. Will try again in Paint when I have more time.

Lacey Musson said...

Hello (: I've tried using image-maps but it says I need to sign up through pay pal- is that true? Otherwise I need to change the image source... I don't know how to do that though ): any advice?

www.mussonmayhem.blogspot.com