The $3 Header and Image Mapping

If you are a code tinkerer/developer without formal training, chances are that you frequently do things about the hardest way imaginable.  Just think of the poor tinkerer who wants extra buttons in his/her header.  Pouring through code, trying to adjust the header, creating buttons, floating things around.  It’s a nightmare.  That’s because you don’t know what you are doing.  And that’s okay, most of us don’t.  We’re trying hard, and we do the best that we can.

Welcome to one of the most useful things a tinkerer can learn:  the wonderful world of image mapping.  Image mapping is when you take an image, plot out where you want your links to go, and code them up.  It’s actually almost sinfully easy using a free download program I’ll link you to.  I’m going to show you an example of a WordPress header I did using image mapping and then explain how I did it.

First, go look at the header and then come back.  The header is at Funny Shirts by Shirts Backwards.  The header, in case you are confused, is everything in the white section at the top of the page, basically above the funny looking guru guy.

I’ll get to the image mapping in just a second, but let’s get the $3 out of the way first.  I paid $1 for each girly picture on the left side.  You can get lots of royalty free photos out there, but if you want to show someone’s face on your site, particularly in relation to selling something, then you better do it legal.  The picture of the smilie face wagging its tongue came from a royalty free clipart site.

So, to put it all together, including the titles, I used a completely free art program called Paint.net.  If you can’t afford Photoshop, there’s a good alternative for you.

I then took the background image from the site and constructed, again in Paint.net, the buttons and put them into the header.  Now I had a single picture, three girls, the title, 10 buttons, and a smilie.

So how do I figure out the coordinates of all those buttons and write the code that makes it work?  I don’t.  I have a free software program that I downloaded to do it for me.  Check out Handy ImageMapper.  There are probably some other ones out there, but this one is the only one I’ve used and it is EXTREMELY easy.

After you install the program, just open it and click on the little file icon and upload your picture.  Here’s a screen shot of the header in question opened in the program.

ex1

Okay, just for a moment, pretend you can actually see that.

Now, next to the file folder button near the top left, you have several mapping tools, like a rectangle and a circle.  You click one of those and then drag out an area on the page where you want to create a link, for instance one of the buttons or the site name.

Once you’ve marked an area, the HREF area on the side opens up and asks you where that link should lead.  You put the URL there.

Now you can go back and mark more areas, each time adding the URL for that link.  When you are done marking and adding URLs for all your areas, the second button from the left on the bottom says “Copy to Clipboard.”  Click that button and paste into some text editor or other.

My results looked like this:

<MAP NAME="map1"> <AREA SHAPE="RECT" COORDS="321,1,409,21" HREF="http://shirts-funny.net/" TITLE=""> 
<AREA SHAPE="RECT" COORDS="412,2,501,20" HREF="http://shirts-funny.net/?page_id=97" TITLE=""> 
<AREA SHAPE="RECT" COORDS="504,1,592,20" HREF="http://shirts-funny.net/?page_id=45" TITLE=""> 
<AREA SHAPE="RECT" COORDS="595,2,682,20" HREF="http://shirts-funny.net/?page_id=99" TITLE=""> 
<AREA SHAPE="RECT" COORDS="686,2,774,20" HREF="http://shirts-funny.net/?page_id=101" TITLE=""> 
<AREA SHAPE="RECT" COORDS="386,128,473,147" HREF="http://shirts-funny.net/?cat=24" TITLE=""> 
<AREA SHAPE="RECT" COORDS="477,130,566,147" HREF="http://shirts-funny.net/?cat=14" TITLE=""> 
<AREA SHAPE="RECT" COORDS="569,130,656,146" HREF="http://shirts-funny.net/?cat=4" TITLE=""> 
<AREA SHAPE="RECT" COORDS="660,130,748,147" HREF="http://shirts-funny.net/?cat=3" TITLE=""> 
<AREA SHAPE="RECT" COORDS="752,129,837,146" HREF="http://shirts-funny.net/?cat=5" TITLE=""> 
<AREA SHAPE="RECT" COORDS="840,1,1014,149" HREF="http://shirts-funny.net/" TITLE=""> 
<AREA SHAPE="RECT" COORDS="6,2,314,148" HREF="http://shirts-funny.net/" TITLE=""> 
<AREA SHAPE="RECT" COORDS="344,33,747,70" HREF="http://shirts-funny.net" TITLE=""> 
<img src="http://shirts-funny.net/wp-content/uploads/2009/06/headermap.jpg" USEMAP="#map1" border="0" alt="headermap" title="headermap" width="1018" height="150" class="aligncenter size-full wp-image-302" />

Fill in the “title” areas, and copy and paste this into your theme where you get your header image and you are done.   Now you have a complex header image that links to where ever you want it to.  If you use good image compression, it also takes up very little space.  It doesn’t call the database over and over.  It’s a great solution.

Questions?  Just leave a comment, and I’ll try to help.

Advertisements

One response to “The $3 Header and Image Mapping

  1. Pingback: How To Do an Image Map… | Web Hosting

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s