How To Create An Imagemap and Add It To Your Blog

Image maps are a really great way of giving your blog an extra boost. It's SUPER easy, and I'm going to show you step by step how I created the image map that I am using as my blog navigation menu :-)

An image map is a picture that you can click different parts of to go to different links. It's a good way of making a navigation menu on a blog, because you can use a font that other people might not have, or a series of pictures that suit your design.

1. Set up your image. I created a blank white image in Paint in the size that I wanted my navigation bar to be. Then I saved it as a .PNG file, and opened up the image in picmonkey. Picmonkey is my favourite image editing software as the fonts, customisation options and clipart suits my personal style.

2. Crop your image to within an inch of it's life. You need to cut out all additional white space. The reason for this is - it will be impossible to customise the image after you have mapped it. If you find the spacing of your blog is off after adding your imagemap, you'll need to start all over again. This way, you can always add extra space by using the 'br' tag.

3. Save your image and head on over to the image map tool at image-maps.com. I have used this tool for years, it's really easy and the interface is simple. It also gives you a few neat options. There are other ways to create an image map, like, coding your own. I don't see the point when this tool does all the work for you!

Click browse and select your image from your computers files.

4. Let's start mapping! It's so easy. The screen that loads will how your image and then a selection of options on the right hand side.

You will have the choice of 'rectangle' and 'custom' areas to map. You probably already guessed that the areas will be the linked parts of the image.

I'll be using the rectangle option for this guide. The custom shape is slightly more complex as you map 'points' around an area you want to link, but once you try it out, it should become quite clear.

The rectangle will appear in the top corner of your image. You can simply stretch and move the rectangle to cover the entire area that you want to turn into a link. Then, copy the link you want clicks to go to into the box titled 'link for this map'. Type a short text in the second box. This is what will show up when the cursor 'hovers' over the link. I just put in the same words as the navigation menu.

5. Rinse, lather, repeat. After clicking save, select 'Rectangle' again and a new box will appear. Move, stretch and reposition the rectangle to your second link area. It helps to have your blog up in the background so you can easily find each link you are looking for.

*** The way I 'label' my posts means that I can direct my readers to pages containing only posts they are interested in. Tag all your posts in a uniform fashion. All my nail tutorials are tagged with 'nails'. To find this link, go to the bottom of an entry and click one of the tags. This will load a page showing all entries with that tag. This is the link that I have used in my image map navigation menu ***

6. Uncheck all of the options in the Advance Tool Box (apart from the one about leaving the linkback in. It's only fair, after all - this is a great free tool!) if you don't, you will get a list of text links directly under your image map, which isn't that helpful for a navigation bar.

7. Get your code and upload your image. Click the 'get code' button and you will be presented with a page like the one below with a series of tabs across the top. You only need basic HTML code for most blogs.

You will need to 'host' the image behind your map somewhere else. Photobucket is a fast, free and easy option. You simply sign up, sign in, click the big green 'upload' button, select your image (must be exactly the same image as you uploaded to image-maps. Then just click the 'direct link' section, and your link will be automatically copied to your clipboard. You might want to put it in a notepad document for a second, as you'll need the clipboard to transfer the code to your blog.

8. Copy the entire code...and load up your blog provider. Now, I used Blogger, and the instructions here are just for my personal blogging platform. It should be straightforward to edit your own blog. You are basically looking for the section whereby you can add HTML code into your blog design layout. In Blogger, it's the section pictured below, labelled 'Layout'.

I want my navigation bar to appear directly below my banner. So I have inserted a 'gadget' (a section of coding) and located it underneath the banner section. Do this by clicking any of the 'Add a Gadget' links. You can always rearrange these, that is the beautiful of Blogger and one of the reasons that I like it so much - simple layout edits are always super easy!

When offered the choice of the type of Gadget, chose HTML/JAVASCRIPT and paste your code into the box. See the screen shot below which should make this clearer.

9. Replace the link. Now, go grab that photobucket link. See in the code where it says "img src="http://www.image-maps.com/etc etc"? Replace everything between those speech marks with your photobucket link.

10. Save and admire - Your work here is done. Check that all the links go where you want them to.

I hope this has inspired you to add an image map to your blog! I'd be happy to ask any questions or elaborate on anything that isn't clear in this tutorial, and I love reading comments both positive and constructively critical.