Software & Apps Design How to Build Image Maps Without an Image Map Editor Image maps are just simple HTML tags By Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated February 20, 2020 Jonathan Minster/Getty Images Design Graphic Design Photoshop Animation & Video 3D Design Tweet Share Email 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 figurepoly—a polygon or multi-sided figurecircle—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, 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.