Bloggiesta Mini-Challenge: How to Create An Image Map

An image map allows you to place more than one hyperlink on a single image. It also gives you the freedom to choose the position of those hyperlinks.

Are you thinking of the possibilities here? Image maps are especially handy for those of us who like to include screenshots of our virtual (or real) bookshelves in our posts! Or for those end of the read-a-thon/month/year summary posts we book bloggers tend to do. No more HTML tables to get each book cover line up just so. Image maps will revolutionize your book bloggy life!

This Mini Bloggiesta challenge will teach you to create an image map using Image Map Tool, my favorite (and free) online image mapping tool. This might look a little long, complicated, and scary at first, but once you give it a try, I hope you’ll find that it’s not too tricky after all.

Make sure the image you want to use will not need to be resized while writing your post. This image needs to remain its original/full size, otherwise the coordinates won’t line up. If your image is too large for your blog, resize it before uploading! You can use a photo editing program on your computer (I like Paint.net) or an online service such as PicMonkey.

Open up a couple of tabs. One opened to your blog (as if creating a brand-new post), one with Image Map Tool open. You may also want tabs open for the individual links you’ll be placing on your image, whether that goes to your past reviews, Amazon, Goodreads, a fellow blogger’s page, wherever.

Upload your photo to your blog post. Again, make sure it is displaying in its original/full size.

Blogger users, move on to Step 4.

WordPress users, at this point you can grab your image’s direct URL in the “Attachment Display Settings” (bottom of the right-hand column after uploading the image) under “Link To.” The size should be set to “full size” by default. Highlight the URL, copy it to your clipboard (hit control-C) and skip ahead to Step 6.

View the HTML of your post.
   –  Blogger users, find the “Compose/HTML” tabs and choose “HTML.”
   –  Wordpress users (if needed), find the “Visual/Text” tabs and choose “Text.”

Find and copy the image’s direct URL. This will be the web address listed after src= in the code. It starts with http:// just like any other web address. On Blogger, this address will look especially long and obnoxious. See?

Highlight the entire address (between the quotation marks) and hit control-C to copy it to your clipboard. If you want to test it to make sure you grabbed the correct address, open up and new tab and try visiting the link. Your image should appear.

Go to the Image Map Tool tab in your browser to paste your image’s address in the box (hit control-V) and click “Start Mapping.” At this point, I’m going to switch to a brief video. You may want to view this full-screen and click the gear in the bottom-right corner to improve the resolution:

Come back to your blog post and paste (hit control-V) that block code wherever you want it to appear in your post. I like to give myself something easy to see when I look through the code, usually in all caps, like:

MAPGOESHERE

That way I can see it in the HTML fairly quickly:

…and I can paste (control-V) my image map’s code in its place:

…and voilà! Here’s the finished image map:

The Year of Learning Dangerously Packing for Mars

It doesn’t take too long once you get the hang of it!

Let me know if you have any questions. I’m happy to help!