Tech Tuesday: Image Mapping
06/04/2013
I can’t believe that I haven’t done a Tech Tuesday since the beginning of March! There is a lot I want to teach you all, but these suckers take awhile to put together! Today I am going to be discussing image mapping. What is imaging mapping? Image mapping is an image with multiple link points within the image. The example I am going to use for this tutorial is my header. My header is one big image.

But there are multiple link points within the image. Everything I’ve squared out in red is its own link to a different page here at Mailbox Journey. I find image mapped images to be more graphically pleasing, then doing a plain menu bar. Image mapping might seem hard to accomplish, or you might think that it takes a lot of skill, but it is actually really easy.

I map my images using a free online program at image-maps.com. So all you have to do is make an image that you’d like to image map, like your intro box (social media icons, your picture, link to your about me page) or make a header with all of your menu links. I normally can only use one image map code on my website at one time, otherwise they become wonky. So I chose to do my header, instead of my intro box.

Once you have created an image, upload it to your server and grab the URL code for that image. You will want to input that URL code on image-maps.com, in the area that I show squared out below.

Then click “Start Mapping Your Image”. You will then see a screen like this and you will have to wait a few seconds…

until it looks like this… and you can click “Continue to next step”.

On the right of your screen, you will see an orange box with some options checked. You want to uncheck all of these options. Below I have an example of what the orange box looks like when you first arrive (on the left), and what the box should look like once you’ve unchecked all options (on the right).

Now you want to click the rectangle button. Once you’ve done so, a small square will show up on your image along with a link dialog box.

You will want to drag the square box over something that you want to put a link to. For example, I drug the box to my blog text, so I can link that text to my blog directly. You can change the square into a rectangle, if you’d like, just like I did for my image. Once you have the box over the text you’d like, fill out the dialog box with the link and the title of the link. For example: I put http://www.mailboxjourney.com as the link, and I put “Blog” in the title box.

Keep repeating that step until you have mapped out all of the links you want in the image. I did a total of 11 links in my image, which means I dragged and re-sized 11 squares on my image. Once you are done, click the “Get your Code” button.

Clicking that button will take you to a page that looks like this…

You will want to click on “HTML Code” at the top of the page.

And copy the text that is in the code box. Take this code and put it wherever you’d like the image to be shown on your blog. Since mine is a header, and I use wordpress, I put the code in my header.php file. If I did an intro box, I would put the code in a siderbar widget. If you have any questions on where to put your code, just ask in the comments section or shoot me an email.

So now my header is just one big image, but you can still click on various parts of it to get where you want to go within the blog.

If you have ANY questions, do not hesitate to ask.
I’m here to help you with all of your coding needs. :)










