How to Make an Image Map for your Website

Wordpress WednesdaysSometimes it’s necessary to link one image to several different URLs, but obviously this can’t be done by creating normal hyperlinks, since we can only link to one image that way.

That’s when we would create an “image map”. An image map is just one image that has several clickable areas that link to various other URLs. Image maps are created using coordinates, located within the image. For example, if your image is 500px x 300px, any spot located within that image will have x and y coordinates, similar to longitude and latitude. Image maps can be created very easily using Photoshop or Dreamweaver, but if you don’t have these costly programs, they can also be done manually with HTML by creating “hot spots” within the image that then link to the desired URL.

Hot spots can be defined in 3 different shapes; rectangular, polygon and circle. You’ll use the coordinates in these shapes to determine your linkable area. You will need the top left and bottom right X and Y coordinates for rectangular hot spots; the X and Y coordinates of the circle’s center and the radius for a circle hot spot;  and the X and Y coordinates for each point of your polygon for a polygon hot spot. The coordinates for the polygon must be in sequential order to work properly. The X co-ordinates are the number of pixels from the left border of the image; the Y co-ordinates are the number of pixels from the top border of the image.

The simplest method for obtaining these coordinates is by opening the image in Paint, which comes with every Microsoft Windows installation.
Image Map

Above you can see that my mouse is located at the upper left corner of the first rectangular image. In the lower left of the window are the X,Y coordinates for this point. Obtain all your coordinates for each graphic within the image. For the circle determine both the X and Y coordinates for the center, as well as the length of the radius, in pixels. Remember that radius is the distance from the center point to the edge of the circle.

Now for the HTML

To create the HTML for the image map, we must first define the source of the image. Each map must have a unique name, so that the image can be attributed to the correct map, should you have more than one on your site.

<img src=”/images/media-map.jpg” width=”396″ height=”95″ usemap=”#Map” />

You will then add your opening map tag, along with the identifying name:

<map name=”Map”>

And then follow with the code for the shapes and coordinates, which define the area to be linked:

<area shape=”rect” coords=”19,15,132,75″ href=”http://www.abc.com”>
<area shape=”poly” coords=”152,70,153,47,167,22,194,17,219,27,225,49,224,70,153,70″ href=”http://www.nbc.com”>
<area shape=”rect” coords=”248,20,302,69″ href=”http://www.cbs.com”>
<area shape=”circle” coords=”353,40,22″ href=”http://www.lifetime.com”>

Every HTML opening tag needs a closing tag, so don’t forget this important element:

</map>

You can see that the rectangular shape has four coordinates – the X,Y for the top left and the bottom right, the polygon shape has 2 coordinates for each point in the polygon and the circle has 3 coordinates – the X,Y for the center point and the radius of the circle.

Here is a graphic highlighting the shapes of the hot spots.

Image map hot spots

The final step is to insert the code into your page, where you want the image map to display.

If you’re linking to external sites, such as in this example, you might consider adding the following code after the link, so that the link will open in a new browser window or tab, leaving your website open for the viewer to return to easily.

target=”_blank”

This code would be added to the end of the <area> tag, following the href, like so:

<area shape=”rect” coords=”19,15,132,75″ href=”http://www.abc.com” target=”_blank”>

It’s always a good idea to keep users on your site, as opposed to taking them away without providing them an easy way to get back.