How do I put an image map in a WordPress.org page, post or widget?

Being able to define bits of an image as ‘buttons’ for links is handy – it gives you greater graphic control over your pages, for a start.

For a blogging newcomer it’s not easy or obvious though and a Google search reveals the usual lack of simple ‘how to’ information.  Forget the WP Codex (unless you’re a complete geek or you enjoy being made to feel stupid because you don’t eat, breathe and sleep Php).

For regular, non-technical folks like you and me, here’s how you do it:

1) Make sure the image you want to use as your ‘image map’ is already hosted somewhere online (i.e. your blog uploads folder or some kind of free image hosting service like PhotoBucket)

2) Go to Chris Seidel’s handy little image-mapping tool and, using the URL of your image, follow the instructions to generate lists of the co-ordinates for the areas in your image that you want to make into ‘buttons’.

For square / rectangular areas (these will be referred to as “rect” in your HTML code) you’ll need 4 co-ordinates (each corner). For complex shapes (these will be referred to as “polygon” in HTML) you’ll need as many co-ordinates as it takes to define the shape.

When you’ve defined the shape, copy and paste the list of co-ordinates for the area into a text file, label them so you know which area they define and save for use in step 4) below.

3) Now copy and paste the following HTML code from this page:

<map id=”counties” name=”counties”>

<area title=”London” shape=”polygon” coords=”357, 523, 361, 534, 369, 530, 382, 528, 388, 524, 386, 517, 398, 517, 398, 510, 386, 501, 382, 494, 372, 499, 357, 503, 356, 522″ href=”http://www.Google.com” alt=”London”></area>

</map>

<p><img usemap=”#counties” src=”http://i768.photobucket.com/albums/xx325/Reviewmylocation/region-map.jpg” border=”0″ alt=”Reviewmylocationmap” width=”550″ height=”651″/></p>

…and paste it into a document so you can edit it.

The above code is what makes the image map at the bottom of this page work.  You can see that I’ve defined a single area – London – to act as a button (in this case, linking to www.google.com).  This button is defined by the red block of code.

To turn it into your image with your selected area, you’re going to need to replace the image URL with your image’s URL, the co-ordinates with your co-ordinates (refer to your lists), the names you want to give your button and the link URL you want the user to go to when the button’s clicked.

When you’ve done that, save it and test it by pasting it into a post on your blog – making sure that you paste it into the HTML window of the post editor, NOT the Visual editor window (as it won’t work).

4) To make more areas of your image into buttons, go back to your HTML and copy/paste that red block as many times as you need buttons between the green tags.

5) Then go through each area of red code and replace the existing co-ords with new ones from your saved area lists.  Then do the same for the area names and the target URLs.

Hope that was useful – leave a comment to let me know how you got on.