How to Image Map for bloggers

Hello creative ladies! I’m here this month to share another blogger tip. Last month, I shared How to Create a Projects Gallery on Blogger, which felt like it got some positive responses, so I wanted to drop some more knowledge.

So today, we’ll be talking about How to Image Map.

How to Image Map | Home Coming for thegirlcreative.com

Now, if you’re anything like I was just a few months ago, you had no idea what image mapping was or how to do it. Don’t worry, you’re not alone. While you can check out this technical explanation here, simply put, I can tell you that an Image Map is exactly as it sounds. You create a “map” of areas over a single image that are “live” and link to different URLs.

I use image maps all the time for my “Popular Posts”  in my blog’s sidebar. Image mapping allows me to build one image file with all of my “popular posts” that clicks through to several different URLs depending on where someone clicks on the image.

So, since we’re using my Popular Posts side navigation as an example, let me show you how I image mapped it.

The first step is to create your image. I use photoshop, and built my sidebar to 220×700 pixels, consisting of six projects (or areas to “map”). Feel free to use any system you’d like to create this image. All you need is a .jpg or .jpeg to work with.

How to Image Map | Home Coming for thegirlcreative.com

The next step is to get your image hosted somewhere. Typically, I use Flickr for all of my hosting, but for some reason it doesn’t compute with my Image Map website. So for image mapping, I use Photobucket as my hosting site. It’s as easy as signing up (if you don’t already have a membership) and uploading your photo!

Once you have your image uploaded, click on your image and the below screen should appear. Click on the “Direct” URL shown below, and it will automatically copy the link.

How to Image Map | Home Coming for thegirlcreative.com

Then it’s time to start image mapping. I use Image-map.com and have been really happy with it’s simplicity. I’m sure there are other sites out there, but this is the first site I stumbled across and it’s been great.  On the home screen, paste the image URL that you’ve copied from Photobucket.

How to Image Map | Home Coming for thegirlcreative.com

Once you’ve pressed “Start Mapping”, the following screen will show up. Your image should appear on the bottom half of the screen. If it does, click on the “click to continue” message.

How to Image Map | Home Coming for thegirlcreative.com

Then this is what your screen should look like.

How to Image Map | Home Coming for thegirlcreative.com

From here, you want to right click/control click which will bring up a drop down. I image map in rectangles for this example, so click on Create Rectangle.

How to Image Map | Home Coming for thegirlcreative.com

Drag the dotted square outline that will pop up to match the size of the area you’re image mapping. Once you have your rectangle positioned, fill in the box of information with the URL you would like to user to be directed to if they click on this portion of your image, as well as filling in a title for SEO purposes.

How to Image Map | Home Coming for thegirlcreative.com

Continue to do this until you have all of your image mapped, making sure none of your rectangles are overlapping each other. I tend to keep a small gap between each of my image map rectangles so there’s no risk of them messing each other up and/or sending the user to the incorrect URL.  Once you have all rectangles completed, right click/control click and click on Get Code.

How to Image Map | Home Coming for thegirlcreative.com

This will bring up another pop up box with options to “sign up” for Image-Map.com or share socially. If you click on the Code tab of the box, and scroll down to the bottom, you’ll see your HTML code. Copy and paste this.

How to Image Map | Home Coming for thegirlcreative.com

Now all that’s left is inputting the HTML into your blog. I use blogger, so I added a HTML widget on my sidebar, labeled it Popular Posts and pasted the HTML in place.

How to Image Map | Home Coming for thegirlcreative.com

And with that, you should have a beautiful sidebar that’s been imaged mapped to multiple URLs! That wasn’t too bad, right? Check out how mine turned out over on Home Coming.

I wouldn’t recommend over-using Image Maps on your blog because I’ve read that Google has a harder time picking up the titles & keywords corresponding to your image, but for purposes of something like my sidebar, it’s perfect!

Leave a comment if you have any questions. I’m happy to help!

Want to learn more about me or see my DIY Projects? Swing on by Home Coming and check us out!

Similar Posts

One Comment

  1. This is a great post! Thanks for sharing it!! I have always wanted to learn this. Thank you for the easy to follow, step by step, directions.

Leave a Reply to Bree Cancel reply

Your email address will not be published.