follow me on twitter like me on facebook
follow my pins view my channel

Tech Life: Image Mapping

A few months back I invested in Headway (more on that later) for my blog theme in an effort to customize my site and minimize the clutter. I’m still working on both, btw. It has taken me some time to decide how I want my site to look and I’m still not 100% on whether or not I’m there.

Lately I’ve been working on tweaking my header. I’m still using a variation of an image of flowers I received last year for my birthday, but instead of being predominantly blue I am now grayish with hints of green, etc. Yet, I wasn’t satisfied.

I decided to add a border and tweak my navigation bar.

Better, but still something was amiss. Do people really say amiss?

So, I decided to break up my header. Almost like pictures hanging on a wall. I was getting there, but not quite.

Then, it hit me. I wanted visitors to be able to click on images in my header and be taken somewhere other than my home page. What was that called again?

It’s like an old friend you haven’t seen in awhile. Not everyone understands her like you do, or sees her value.

Image Map Your Header

with minimal techie-ness

Do a search of image mapping and you will find several really good articles on how to use Photoshop and writing code. This is not one of those articles.

Fun fact, I purchased (not for a lot of money, but still) a program to help me image map my header. Then, not an hour later, I came across a FREE program online. Can I get a head slap? Anyone? Anyone? Bueller?

Live and learn.

Where was I? Oh, yeah. I was going to share with you how to create an image map header for your blog, any image for a post, even customize an image for your Facebook page.

Creating Your Code

You need an image. Any image will do, but one that makes sense for your purpose is best.

I added buttons for Twitter, Facebook, and my RSS feed to my header.

You will need to map your image.

Mapping requires knowing the coordinates of the areas where the links will go. This is best accomplished with an image editing or mapping-specific program (this can be accomplished manually, or so I read, but a program is much easier).

Image-maps.com will do the heavy lifting for you. Upload your image and start adding rectangles (or other shapes) and your links to specific areas on your image.

For more on using image-maps.com check out How to create an image map for a static fbml tab on a facebook page.

You need a code.

Click on get code, then html code for blogs & other websites or css code for your Facebook page. If you are comfortable with custom css, then you can just use that for your blog (but, then why are you here getting advice from me anyway, right?).

You have your code, now what?

This is where things get a bit tricky. I spent quite a bit of time trying to figure out where to put the code once I had it. Seems many people had this problem, yet no one ever answered the question. Well, they didn’t directly answer the question.

Blog Header

In Headway – go to Headway Configuration and add your code under General Options/Header Scripts. I’m not familiar with Thesis, but if there is a header scripts area, then you should be able to drop your code there as well.

Note: I haven’t dug down too deep yet to rid my site of the header name that automatically shows when the header image isn’t uploaded in Visual Editor. So, I just made it the same color as my background and 6px in height in an effort to hide it for now.

In other themes – find your header.php file. Add your code after <head>. You will want to play around a bit with alignment to get your header to show exactly where and how you want.

Blog Page/Post

This is the easiest way to add an image map. Just create or edit any post or page, add your image code using the HTML tab and you are done.

Facebook

You will need to have your fan page set up. Then go to edit page and add the application FBML. Once you add FBML you can edit this to show as a tab, create a name for the tab, and insert anything you wish to show in this tab. This is where you will insert the css code you got from your image mapped picture. To see an example check out AnneOnLife’s Facebook Page and click on the tab Life is…

That’s it!

Now you can add image with links easily and at no cost to you. Play around with it and just have a little fun.

Online Image Mapper
Online Image Mapp Tool
❀❀❀❀❀❀❀❀❀❀❀❀❀❀
Disclaimer: I am in no way affiliated with image-maps.com. No compensation was received for this post. All opinions are 100% my own. Affiliate link for Headway used.
Related Posts with Thumbnails
Copy Protected by Chetans WP-Copyprotect.