How to Manually Code HTML Image Maps

In a previous post, Use Image Maps to Create Interactive Emails, we discussed using image maps in your HTML emails to create interactive graphics and circumvent pesky styling problems. Now, as promised, I will walk you through manually coding image maps.

 

Recap

An image map is an HTML element that allows you to link different parts of one graphic to different web locations by defining clickable areas on your image. (Need to brush up on your HTML skills? W3Schools is a great resource. ) For example, I could use an image map to create the illusion of buttons on this graphic:

The “buttons” aren’t actually buttons; they’re just part of the graphic as a whole. But, the image map allows me to define the clickable areas (the read “buttons”) or hotspots and link only those parts of the graphic to my previous blog posts. Note: If you have one graphic with one button, I’d recommend just linking the entire graphic. Image maps allow one graphic to serve double (or triple) duty and link to more than one webpage.

Image maps are best used in HTML emails because not all email clients support more advanced methods. There are certainly simpler techniques to achieve the same effect on your website.

Parts and Pieces

An image map is made up of several parts: a map name, area shapes, coordinates, URLs and the image or graphic the map is defining. For the graphic above, the image map would look like this:

Map Name and Graphic

Your html image map will start, of course, with the image you’re mapping. Most email editors have a user-friendly way of inserting images into your emails that doesn’t require coding. You will, however, need to add the usemap attribute to the image tag in this format: usemap=”#mapname”>

The map name can be whatever you want, but I’d recommend naming it something logical, especially if you’re going to be grabbing and repurposing this code later on or you are using more than one image map. You will also need to add the name attribute in your opening map tag.

Area

Next you will include an area tag for each hotspot you are defining. If you were linking the planets on a graphic of the solar system to different Wikipedia pages for each planet, you’d need eight area tags. (Sorry, Pluto.) In my example, I am only linking two parts of the graphic (the two read buttons) to two different URLs, so I only need two area tags.

Area Shapes

Each area tag will include a shape attribute that defines the shape of your image map’s hotspot. The three options are rectangles (rect), circles (circle) and polygons (poly).

Area Coordinates

Each area tag will also include a coords attribute that defines the location of your hotspot by listing a set of x (horizontal) and y (vertical) coordinates. Different shapes require different coordinates.

Rectangles image maps will have the coordinates: coords=”x1,y1,x2,y2” where xy1 are the coordinates of the top left corner and xy2 are the coordinates of the bottom right.

Circle image maps will have the coordinates: coords=”x,y,radius” where xy are the coordinates of the center of the circle and the radius is the radius of the circle.

Polygon image maps will have the coordinates: coords=”x1,y1,x2,y2,x3,y3….” where each xy pair defines a corner of the shape. So, a triangle would have three pairs, a polygon five pairs and so on.

You can use image editing software to find the coordinates of your hotspots. I use Photoshop Elements, but Microsoft Paint works just as well. Open your graphic in paint and move your cursor to the location of the coordinates you need. The x,y coordinates are displayed in the bottom left of the application screen.

For my example, I placed my cursor over the top left corner of the read buttons and recorded the x,y coordinates Paint displayed. Then I repeated the process with my cursor over the bottom right corner.

Finding the radius for circular hotspots is a little trickier. As you know, the radius is the distance from the center of a circle to a point on its edge. For circles, first find the center coordinates. Then move your cursor to the left or right until it is over the edge. Tweak the position of your cursor until it has the same y value as your center point. Subtract the smaller x value from the larger, and you have your radius.

Note: If you are using Photoshop Elements, under the Window menu item, make sure the Info window is selected. This will list the x,y coordinates.

Area URL

For each area or shape you are linking, you will need to include the URL you are linking to.

The first html image map you code will take you a while, but like most things, the process gets easier every time you complete it. If you cannot get the hang of it, try using an online image map generator.