Using Image Maps for Custom Headers or Menu Bars

Image Maps, Where Have You Been All My Life?

Image Maps Adds an Air of Sophistication to Your Blog

Image Maps enables you to create custom headers and menu bars?! Oh my. I am on Cloud 9.  I'm in a blur, a daze... I'm beyond happy! I just discovered Image Maps, by far the most amazing thing that has ever happened to my blog. I am in LOVE!

But at the same time I'm a little upset. Why didn't I know about this before? What could I have accomplished for, years, with this amazing little tool? It's as if we were living in parallel universes, always reaching out for each other, but never making contact. Until now. But there's no use ruing the past. I have embraced the future: a bright future, made even brighter because of Image Maps! And it's absolutely free!

My biggest stumbling block as a blogger has been, in essence, not being able to get my images to do what I want them to do, specifically, an inability to separate sections of my images into distinct clickable units. Because I didn't know how to do that, I've been limited in my capabilities. Uploading multiple images and getting them to "behave" together in Blogger is a bit of a nightmare. But with Image Maps, those problems are gone! And a big thanks to Ashton from Something Swanky for all of her amazing blogging tutorials--that's where I first learned about Image Maps!

So, to demonstrate, I linked up this photo of my husband in the workshop where we used to live (where he actually had space to work on cars). In this pic he's working on converting this old diesel VW Rabbit truck to run on vegetable oil. Usually I'm posting much more girly photos, but today, I'd like to think of this demonstration as an homage to my husband, as we celebrate our 6th anniversary in a couple days :)

Try it out! The orange text (hood of the car) will take you to the Greasecar website (that's where husband got the kit to convert his diesel VW Rabbit to run on vegetable oil). The green text (there's a motor under that) will take you to TDI forums (husband gets/offers lots of car advice here). The yellow text (shop floor) will take you to a page on my site with a random sampling of some of the cars husband worked on in that shop. And, of course, the "Why I Love Image Maps" banner links to the Image Maps site! Cool, right?

It's so easy. Here are the steps to use Image Maps to improve your blog:

1. Create your image (I use InDesign; PicMoney is awesome and more user-friendly if you're not comfortable with Adobe CC. Refer to Ashton's Something Swanky Blog Tutorials as a great PicMonkey resource).
2. Upload your image to a image hosting site (I use Photobucket because I think it has the cleanest interface). 
3. Copy the DIRECT link (I turn on "Easy Linking Mode" in Settings->Album to find this more quickly. Otherwise, click the gear-> get links, then copy direct link).
4. Go to Imagemaps.com and paste your link into the "From a URL" box. Submit it, and wait until the next screen.
5. Use the rectangles (or custom shapes) to begin designating linkable spots in your image.
6. I unclick "Show Text Links" because it looks cleaner, but if you leave them, it will probably help with your SEO.
7. Click "Get Your Code," and on the next screen, click "HTML Code." Copy your code.
8. Paste your code where you want your image to show up (make sure you're in HTML mode).

You'll notice the Image Maps interface itself is nothing to write home about (def not girly), but all the information you need to use it is there, and with its awesome capabilities, I couldn't be happier!

Now back to the girly stuff... wondering where to see this in action on my blog? Look up! The six large menu buttons on the top of the site were linked using Image Map.

And that's it. I'm sure my header and menu will continue to have modifications over time, now that I know the potential! Thanks, Image Maps!