How to Build Image Maps Without an Image Map Editor

Image Maps Are Just Simple HTML Tags

Businessman's hands using computer at desk
moodboard/Brand X Pictures/Getty Images

Image maps are an exciting and interesting way to liven up your Web site—with them, you can upload images and make parts of those images clickable to other online assets. If you're in a pinch and don't want to download an image map editor, creating a map using HTML tags is straightforward.

You'll need an image, an image editor and some sort of HTML editor or text editor.

Most image editors will show you the coordinates of your mouse when you point in the image.

This coordinate data is all you need to get started with image maps.

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:

 <img src="kittens.gif" width="250" height="150" alt="Kittens!" usemap="#babycats">

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:

<map name="babycats">
    <area shape="rect" coords="0,0,10,15" href="morris.htm" alt="Morris">  
</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.

<map name="babycats">
    <area shape="poly" coords="17,34,41,96,110,121" href="garfield.htm" alt="Garfield">  
</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:

<map name="babycats">
    <area shape="circ" coords="122,122,5" href="catbert.htm" alt="Catbert">  
</map>

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

<map name="babycats">
    <area shape="rect" coords="0,0,10,15" href="morris.htm" alt="Morris">  
    <area shape="poly" coords="17,34,41,96,110,121" href="garfield.htm" alt="Garfield">  
    <area shape="circ" coords="122,122,5" href="catbert.htm" alt="Catbert">  
</map>

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, bandwith 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.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Build Image Maps Without an Image Map Editor." ThoughtCo, Sep. 27, 2017, thoughtco.com/build-image-maps-without-editor-3468675. Kyrnin, Jennifer. (2017, September 27). How to Build Image Maps Without an Image Map Editor. Retrieved from https://www.thoughtco.com/build-image-maps-without-editor-3468675 Kyrnin, Jennifer. "How to Build Image Maps Without an Image Map Editor." ThoughtCo. https://www.thoughtco.com/build-image-maps-without-editor-3468675 (accessed November 22, 2017).