Update: you can see the finished version of my map here.

So I want to make a big map of europe that hilights the different countries when you move your mouse over them. Initially I thought this would be really easy using a bit of CSS and :hover . . . . no dice. But to my surprise I found out that it’s possible to use an ordinary HTML image map to define some pretty complex shapes, and let’s face it, shapes don’t get much more complex than this.

OK, so it’s possible to create clickable areas in HTML using an image map, but how do I add rollover effects to this? CSS didn’t seem to work so my next port of call was the wonderful jQuery. I found a plugin call mapHilight that takes an HTML image map, and adds some javascript hilighting wizardry to it. You can see a really cool example using a map of the states, this is almost exactly what I want but for Europe. I’m going to try and record everything I do, in the hope that someone else might find this useful, so here goes.

Step 1: Your image

First of all, you need to prepare the source image. In this example I’m going to be using a map of europe (see below).

Step 2: HTML Image Maps

Now that I have my image ready, I need to work out how to get the computer to recognise the individual areas. For my map each country is separated from other bordering countries by a white line, your image might not be so defined, in which case you should probably open the image up in Photoshop or something and separate the sections to make it easier.

I did a bit of research on Google and came across something quite interesting. Built into HTML there are <map> and <shape> tags. These are used to define image maps like the one I’m trying to make. An example of an HTML image map is this:

Here you can see four areas within a map. In this example each area is set as shape=’polygon’. This is because these shapes are complex and can’t be defined in simpler terms. However, if your image map is not so complicated, you could try using shape=’rect’ or shape=’circle’.

• More information on Creating HTML Image Maps

OK, so I know that the shape of each country on my map can probably be defined as a list of points (like a join-the-dots puzzle). I’m not sure exactly what the numbers will mean, but I guess they’re just coordinates on a fictional grid slapped on top of my image.

Next question: How do I get these coordinates for my own image?

Step 3: Download Inkscape

Well after a bit more digging I found an App called Inkscape.

Download Inkscape (free)

I think you can probably use some other apps too, like Illistrator or something else, but I don’t have the kind of money to splash out on such overpriced tripe, so I’ll be using Inkscape.

Right, while that’s downloading I’ll explain why I think Inkscape will do the job. To be honest I don’t really know that much about inkscape. What I do know is that you can open up any image you like and trace the edges. You can then save the image again (in a different format) and this will contain this list of coordinates that I’m after. Hopefully.

Step 4: Path Detection in Inkscape

Once you've finished downloading Inkscape you'll need to open it up. Then select File>Open and select the image you are working on.

Now here’s where it gets a bit more complicated. Inkscape is very good at detecting edges, but I found it needed a helping hand to make sure it knew that all of these countries were separate blobs, and not just one big blob. The first time I tried edge detection I managed to get a big polygon, but it was so big that it took up most of mainland europe. What I’d recommend you do is do a bit of experimentation to see how well Inkscape finds the borders in your image.

To give it a go, click on your image (so that there are black resizing dots around it), then select Path>Trace Bitmap. In the box that pops up, you can either select ‘Edge Detection’ or ‘Color Quantization’. As far as I can tell, you should use the first if there are very definitive edges already in the image and the second if the areas you’re trying to separate are different colours. I first tried ‘Edge Detection’ and this wasn’t really working for me. So I went back to Photoshop and coloured all my countries in different colours, opened Inkscape back up and selected ‘Color Quantization’ and it worked much better. Once you’ve selected your choice click ‘Update’ to get a preview of what it will look like and then ‘OK’ to start the magic.

Now if it’s worked, you should see a black line around each of the areas in your image. Inkscape should turn your image into several different shapes all with a black outline. If this doesn’t happen, or you get shapes in the wrong places, you’ll have to undo the path detection and try again. Once you’re happy you can move onto the next step.

Step 5: HTML Polygonization

In Inkscape, save the image as a .svg file. This is the format we’re going to use to extract the path information for our HTML polygon shapes. Open up your SVG file in your favourite text editor and scroll down until you find a list of numbers a bit like this one:

d=”M 662.5,1204 C 634.39954,1200.1136 558.02119,1154.3401 .. . .. .

Believe it or not, this is your image map. Unfortunately this data is in a format that isn’t very useful to us. Not only are the shape coordinates shrouded in a mysterious M and C characters, but they are also using lots of decimal places which HTML can’t understand. To sort this jumble of nonsense I decided to write a bit of Javascript. I call this my Polygonator. Go there and enter in the numbers and text within the “s just after d=”. So your bit of text will start M 662 . . .etc and should end with a single z. Then click ‘Process’ and you should be given some HTML code. Hooray!

A word of warning: depending on how acurate you want your area to be you may need to simplify your path a bit. If your SVG files contains millions of coordinates and you want something much simpler, then you can open it back up in Inkscape and select Path>Simplify. Then repeat this step.

Step 6: Add Your Image Area

Copy all of this HTML and paste it between the <map> </map> tags in your webpage. You should now have something that looks a bit like:

If you have more than one line in your SVG file starting with d=” then you’ll need to process each of these and convert them one at a time. Just repeat steps 5 and 6 for each of them and you should be OK.

Step 7: jQuery and mapHilight

Now we need to tie up the loose ends and get to the jQuery bit. If you haven’t already included jQuery at the top of your page then put this in your <head> section:

< ?= javascript_include_tag('jquery-1.3.2.min.js'); ?>

Now we need to add the MapHilight jQuery plugin. I don’t really understand what this plugin does, but it seemed to do wonders for my map, so you should give it a go too.  Download the mapHilight plugin and then include it just after you included jQuery.

< ?= javascript_include_tag('jquery.maphilight.min.js'); ?>

The second bit of script just initiates the plugin. It looks for an image with class=’map’, so if you’re using the same code make sure your image has this class. For example:

You’ll see my image also has usemap=”#testMap”. This is the bit that links the image to the <map>. So make sure you include the name of your map in this bit.

Good Work Team

Finished! Now when you look at your page you should see that different sections of your map light up when you move your mouse over them. Let me know if you have any problems and I’ll do my best to suggest something.