Tech Tips: How to Make Image Map

Today marks the return of Tech Tips – which I still plan to keep around here sporadically. This tutorial will show you how to make image maps – which is what I used to make this graphic for the Sundress Series:

An image map allows you to take a single image and link it to multiple places. In the map above, if you click on any of the blog names you’ll go to that blog. And you don’t have to use text in your image – that’s mostly for the viewer.

So, to make my image map I used this site: http://www.image-maps.com/ The first thing you’ll see on the site is the screen below, and you can upload your image. BUT DON’T DO THAT! As you can imagine, this site can’t host (store and serve) every image for everyone that wants to make an image map.

Instead, resize your image for web (see this tutorial) and go ahead and upload it to your blog in a blank post. Then get your image address (in Wordpress, switch to text mode, in Blogger, switch to HTML mode and look for the web address that appears after the tag <img src= ” Copy the address that appears between the “” marks) and paste it in the mapping tool where is says “From a URL”.

Then click “Start Mapping Your Image” and you’ll get this screen.

Once that screen finishes loading and goes away, you’ll see another screen with this toolbar on the right. You need to change the base URL. Change that to your blog URL – the main page.

Now you’ll map your image. Click on “rectangle” (easiest) in the toolbar on the right. A rectangle will pop up on your image. Drag it to where you want it, resizing if you need to, and then fill in the link. Then click “Save” Repeat as necessary until you get everything you want mapped.

When you’ve finished mapping, look on the right toolbar for the “Get Your Code” button.

You’ll go to a screen that looks like this. Donate or share as you wish, then click the “HTML Code” option.

 

You’ll got to another screen that looks like this, except the HTML won’t be green. You need to copy everything I highlighted in green, and paste that into a blog post in Text or HTML mode. Please note – this is sample HTML just to show you the screen. It won’t work or link to anything, and your code will probably be a lot longer than what I show below.

 

And that’s it! Easy, right?