How to Build Image Maps Without an Image Map Editor

Image maps are just simple HTML tags

What to Know

• Use a normal size image that the browser won't rescale. You'll also need an image editor and an HTML or text editor. 

• When inserting the image, add an extra attribute to identify the map's coordinates.

• For example: Kittens!

This article explains how to create Image Maps using HTML tags instead of an image map editor. Most image editors will show you the coordinates of your mouse when you point in the image, which is all the data you need to get started with image maps.

map with pins and yarn stuck in it

 Jonathan Minster/Getty Images

Creating an Image Map

To create an image map, first select an image that will serve as the basis of the map. The image should be "normal size"—that is, you should not use an image so large that the browser will scale it.

When you insert the image, you'll add an extra attribute that identifies the map's coordinates:


When you create an image map, you are creating an area that is clickable on the image, so the map's coordinates must line up with the height and width of the image you selected. Maps support three different types of shapes:

  • rect—a rectangle or four-sided figure
  • poly—a polygon or multi-sided figure
  • circle—a circle

To create the areas, you must isolate the specific coordinates you intend to map. A map may consist of one or more defined areas on the image that, when clicked, open a new hyperlink.

For a rectangle, you map just the top left and bottom right corners. All coordinates are listed as x,y (over, up). So, for the upper left corner 0,0 and the lower right corner 10,15 you would type 0,0,10,15. You then include it in the map:


   
 


For a polygon, you map each x,y coordinate separately. The Web browser automatically connects the last set of coordinates with the first; anything inside these coordinates is part of the map.


   
 
 


Circle shapes only require two coordinates, like the rectangle, but for the second coordinate, you specify the radius or the distance from the center of the circle. So, for a circle with the center at 122,122 and a radius of 5 you would write 122,122,5:


   
 


All areas and shapes may be included in the same map tag:


   
 
    
    
 

Considerations

Image maps were much more common in the Web 1.0 era of the 1990s into the very early 2000s—image maps often formed the basis of a website's navigation. A designer would create some sort of picture to indicate menu items, then set a map.

Modern approaches encourage responsive design and use cascading style sheets to control the placement of images and hyperlinks on a page. 

Although the map tag is still supported in the HTML standard, the use of mobile devices with small form factors may lead to unexpected performance problems with image maps. In addition, bandwidth problems or broken images moot the value of an image map.

So, feel free to keep using this stable, well-understood technology—knowing that there are more efficient alternatives currently en vogue with Web designers.

Was this page helpful?