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.

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.

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.

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.

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.

Then this is what your screen should look like.

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.

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.

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.

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.

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.

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!