How To Easily Create A Clickable Image For Your Blog Or Website

Have you ever looked at fun elements in other blogs and thought, 'how on earth do they do that??' 

I recently discovered something that has completely opened my eyes and showed me how I too can make cute clickable images for my blog.

The image map!!

Now I may well be a long way behind the eight ball, but if you're like me and a little slow on the technical side of things, you should totally check this out. I'm going to do a quick tutorial here about how to make an image map and I really hope this will help you, like it has me, add some fun elements to your blog or website.

As usual, I'll start at the very beginning so forgive me if I'm stating the obvious!

What is an image map? 

Well, it's an image that has multiple links. See my header up there, with the handwritten tabs below? That whole thing is one image, turned into an image map. There's another one on the side bar - from my picture right down to all the red tabs is just one image with multiple links in it. Get the idea? Exciting, isn't it!

How do I make one?

There are various platforms you can use, but I use Image-Maps because it's free and easy.

Step 1 - Upload your image

The front page of Image-Maps will ask you to upload or put in your image URL. If you're just practicing, upload any image, but if you want to use this image on your blog, you'll need to put in your image URL, which means you need the image to be hosted somewhere. I'm going to assume you know how to host images and find it's URL..... I use Photobucket for this but there are others. (Please let me know in the comments if you don't know how to do this and I'll help!)

So, pop your image URL in and click on Start Mapping Your Image.

Step 2 - Set up the toolbox

On the right you'll see your Image Mapping Toolbox. There are lost of things here but for a simple image map you don't need to worry about most of it. I'm going to show you the most basic steps then you can play around with it and try out other options.

First of all, go down to the Advanced Toolbox section. You need to change the Base and Image URLs to your own image URL. Make sure BOTH of these are correct.

Next, uncheck the box that says Show Text Links because you don't want them to mess up your beautiful image.

I have left the next three boxes blank because I'm keeping it simple, but you can try these ones out for yourself later, especially if you want to get that cool effect where your image changes when you scrool over it!

Leave the last box checked, as the writer of this page has requested. Because it's useful and free so it's the least we can do I think!

Step 3 - Mapping!

Ok, now you're ready to start mapping. Again, to keep it simple we'll just use rectangles but as you can see, you can create custom shapes if you want!

Click on the Rectangle box in the Toolbox. This will put a rectangle (and it's info box) in the top left corner which you can then drag and resize to the place you want it to go.

Next, you need to type in the URL that you want people to go to when they click on this part of the image. Thsi is the first box. Leave the second one blank as we don't need it (only used when text links are showing, which they aren't because they'd ruin our pretty picture!)

You can test the link to make sure it's right, then click save.

Repeat this for each part of the image you want to turn into a link.

Step 4 - Creating the HTML code

Now click on Get Your Code in the toolbox. You'll go to a new page that looks a little complicated, but  don't worry as we're going to ignore most of it!

At the top there are some tabs - click on the second one that says HTML code. This will take you to a page with your code in a box you can copy and paste into your site in whatever way you normall add HTML code!

And you're done!

As you can see, there are CSS options, ways to incorporate it int Facebook and so on..... I've just used it in it's most basic way and it has enabled me to make changes to my blog I didn't know how to do before. I am sure I will learn more, as will you, but I hope this tutorial helps get you started and opens your eyes to the possibilities of image mapping!

Have fun and if you use any images you create this way please please please let me know in the comments as I'd love to check out your work! Any questions, don't hesitate to ask either!

Jen x