HTML Images - Image Maps

Chapter 29 31 mins

Learning outcomes:

  1. The inception of server-side image maps
  2. Transition to client-side image maps
  3. The <map> and <area> elements
  4. The <area> element in detail (shape, coords, and alt)
  5. A simple image map example
  6. Image map generators
  7. Things to note regarding image maps

Server-side image maps — the beginning

During the early days of HTML, graphical capabilities of the web were fairly limited. The many users of HTML were demanding more features than what HTML was currently providing.

For example, it was not possible (back then) to create a fancy button with a gradient background, with elegant text itself styled in a gradient color. Plus it wasn't very easy to make complex layouts for webpages, as it is today (thanks to CSS).

Yes, these graphics might look awful today but they were quite a norm back then, as people got 'graphical powers' for the very first time on the web.

However, computers were way ahead of HTML in their capabilities in terms of rendering graphics, plus there were many sophisticated programs available to users to create intricate graphics.

Pairing this fact with the increasing user demand for more bells and whistles in HTML in terms of graphics, ultimately came in the notion of image maps in HTML.

The basic idea was that web developers would create images, containing all their desired buttons, visual styles, typographic embellishments, complex layouts, and then users would be able to land at different pages by clicking on those images at different locations.

So for instance, in the following image, the text reading 'Home' might point to the home page of the underlying website, 'About' might point to the about page, and so on:

Image-based navigation menu
Image-based navigation menu

Defining the idea more precisely:

In HTML, an image map is an image where we can interact with different regions for getting to different webpages.

In the beginning, the idea was quite naive:

An image was wrapped up in a link (<a> element), which meant that the image could be clicked. Now, when a click was actually made anywhere on the image, as usual the link was opened up, however additionally, because the image was an image map, the coordinates of the pointer were sent along to the server in the dispatched request.

The server at the back end was configured to be able to understand which set of coordinates corresponded to which part of the image, and likewise, deliver the appropriate webpage.

For example, if an image was clicked at a point containing a button, reading something as 'Home', the server would easily be able to figure this out by processing the received coordinates and then delivering the home page.

This was the very first kind of image map in HTML, known as server-side image maps.

The ismap attribute of <img>

Surprisingly enough, server-side image maps are still supported in HTML as of the time of this writing, perhaps for backwards-compatibility with ancient websites that were built using them.

For a server-side image map, we set the ismap Boolean attribute on an <img> element. That's it. Yes, that simple.

Thereafter, clicking on the <img>, which is surrounded by an <a> element, takes us to the corresponding webpage, sending it the click coordinates in the query string. The server then processes the coordinates and delivers an appropriate response based on them.

However, this server-side map approach was fraught with many problems. Most importantly, there wasn't any clue whatsoever in the HTML of the hotspot regions of an image; the entire image was clickable.

Search engine web crawlers had a particularly difficult time making sense of server-side image maps; and why wouldn't they — there was absolutely no way to get to know about all the 'actual' links hidden inside an image.

However, because the idea, of having complex graphics contained within an image and getting to different pages depending on where a click was made on the image, was a considerably good one, image maps weren't completely replaced in the coming times.

Instead, the issues facing server-side image maps were remedied by introducing another, better kind of image maps — client-side image maps.

Transition to client-side image maps

As the name tells it all:

A client-side image map contains all the image coordinates-to-link mapping logic on the client, that is, in the HTML.

There is absolutely no need to go to the server to figure out which region on an image corresponds to which webpage; the HTML itself contains all the required information in it for the browser to be able to make this judgement.

We'll get to what exactly is this information in the HTML that allows a client-side image map to work shortly below but before that, let's take some time to appreciate the solutions offered by a client-side image map.

  • Most importantly, search engine crawlers could easily process the links defined on an image since they're all part of the HTML (which is what web crawerls can process).
  • Secondly, there is no need to surround an image with a link, ultimately solving the problem that an entire image is clickable in the case of a server-side image map even though some regions may not contain anything useful.
  • Thirdly, because the entire coordinate resolution happens on the client end, there is absolutely no need to burden the server with this task of processing image coordinates and then returning back an appropriate webpage. The server side code could be kept simple.

And now, let's see how a client-side image map gets all its information.

The two elements that were inaugurated with the introduction of client-side image maps for containing the necessary coordinates-to-link mapping information were <map> and <area>.

Let's see them in detail...

The <map> and <area> elements

The <map> element is used to define an image map for an <img> element. It consists of <area> elements, each of which individually defines a hotspot in the <img>.

A hotspot is simply a clickable region in an image, associated with a given hyperlink.

The usemap attribute of an <img> element is used to associate it with a given <map> element and, likewise, an image map. It contains the name of <map> element that is tied to it.

The name of a <map> element comes from its name attribute, preceded by a hash symbol (#) just like we do so when referring to an anchor in the document.

So, for example, if we have a <map> named as follows:

<map name="image-map"></map>

we'll link it to an <img> like this:

<map name="image-map"></map>

<img usemap="#image-map" src="...">

The usemap attribute on the <img> element instructs the browser that the image is associated with an image map; this image map is named image-map.

The # symbol is only required in the usemap attribute of <img>; we shouldn't have it in the name attribute of the corresponding <map>.

The <map> element requires the name attribute; without it, there's no way to uniquely name a <map> and, likewise, of being able to link an <img> to the map.

The <map> element can also have an id attribute and in that case, as defined by the HTML standard, its value must be equal to its name attribute. But remember, the primary means of naming a <map> is its name attribute not its id.

Now, <map> only initiates an image map; the actual clickable areas — or the so-called hotspots — in the map are defined by <area> elements inside the <map>.

The <area> element, as per its name, defines a hotspot area within an image map (i.e. the <map> element).

Sensibly, <area> is a void element in HTML, and the only element in which it can be nested is <map>; it's invalid to have <area> inside any other element.

Now, the way <area> defines a clickable area within an image map is quite interesting. Of course, it doesn't happen by manually specifying each and every clickable pixel — that would be an overkill. Instead, it happens by specifying basic shapes.

These shapes are as follows:

  • Rectangles: the most naive of all shapes.
  • Circles: another pretty common and elementary shape.
  • Polygons: triangles, rectangles, pentagons — essentially any shape with more than two vertices.

Polygons can be used to create highly complex shapes that can approximate almost anything in an image map.

A rectangle is also a polygon but because of the rudimentary usage of rectangles just in general, it is treated as a special polygon case by <area>.

There can be as many <area>s within a <map> as we want to. Typically, though, the number is not very large.

It's now time to dive a little bit more deeper into the <area> element and then create an image map for a very simple image using the learnt concepts.

More about the <area> element

The shape represented by an <area> element is specified by its shape attribute. The exact position of this shape, on the associated image, is given by the coords attribute.

The possible values of shape are given as follows:

rectRepresent a rectangle.
circleRepresent a circle
polyRepresent a polygon.
defaultThe default value in case shape is omitted. Represents a shape covering the entire area of the image.

The value of coords depends on the shape of the <area>.

The following table explains the syntax of coords for each of the possible shapes of an <area>:

ShapeGeneral form of coordsMeaning of this value
Rectanglex1, y1, x2, y2x1, y1 give the x and y coordinates of the top-left corner of the rectangle while x2, y2 give those of its bottom-right corner.
Circlex, y, rx, y give the x and y coordinates of the center point of the circle while r gives its radius.
Polygonx1, y1, x2, y2, x3, y3, ...Each subsequent x, y gives the coordinates of the next point of the polygon. (Note that at least three such points are required as a polygon is comprised of at least three vertices.)

Keep in mind that wherever we specify actual coordinates in coords, they are computed relative to the top-left corner of the underlying <img>.

So the position and shape of a hotspot region in an image map is governed by an <area> element by virtue of its shape and coords attribute. With this, the region become clickable.

But what exactly happens when such a region is clicked? We haven't stated that yet.

Well, in this case, the browser window is navigated to another webpage, just as happens when we click a hyperlink (an <a> element with an href). This webpage is specified via the href attribute of the <area>.

Choosing the href attribute to hold the destination URL for an <area> was a sensible choice. An image map is essentially meant to define hyperlinks over a given image, each of these being given by an <area> element; likewise, an <area> is sort-of identical to an <a> element in many respects, which holds the destination URL in the href attribute too.

Let's consider a quick example before moving on:

Suppose we have a rectangular region on an image showcasing a button, where the coordinates of the top-left and bottom-right corners of the region are (20, 10) and (300, 290), respectively. We want this region to take us to the home.html page of the underlying website.

The <area> element to accomplish this task will look as follows:

<area shape="rect" coords="20, 10, 300, 290" href="home.html">

The shape of the area is a rectangle as laid out by the shape attribute. The first set of integers in coords, i.e. 20, 10, give the coordinates of the top-left corner of the rectangle whereas the second one, i.e. 300, 290, give the coordinates of its bottom-right corner. href gives the destination URL.

Simple, isn't this?

Now before we get to a real image map example, it's worthwhile knowing about one detail of an <area> that allows us to exclude a region from consideration in contrast to including it.

When an <area> doesn't have an href on it, it's considered to be an exclusive region in the image map.

For example, creating a rectangle <area> for the text in the image below, depicted as a dashed box, will make the entire region clickable:

Image map with rectangular clickable region
Illustration of an image map with a rectangular clickable region

If we wish to exclude the space between the text, we can use a non-href <area> to get the following; the red box represents a rectangular <area> without an href:

Illustration of an image map with rectangular clickable and non-clickable regions
Illustration of an image map with rectangular clickable and non-clickable regions

The red box <area> will follow the same shape and coords rules for every <area> element; it'll just have an absence of href.

Moving on, just like there are two parts of a hyperlink (<a> element): a destination URL and an anchor text, the same applies to an <area>.

We've already seen that the destination URL goes inside the href attribute. But what about the anchor text? Where does the anchor text go in an <area> if an <area> is meant to assimilate a hyperlink.

The anchor text for the <area>, basically describing whatever it links to, goes inside the alt attribute.

The alt attribute provides an alternative text representation of an <area> in case the corresponding image fails to load. In effect, it serves to give context to an <area>, i.e. what it points to.

alt is a highly important attribute for <area>, especially for screen reader users who are unable to understand an image's content based on its visuals. Web crawlers treat the alt attribute as describing the link that the <area> makes with another resource.

The alt attribute of <area> can be thought of as the content of an <a> element.

For example, going with the earlier code snippet presented, here's how alt can be used:

<area shape="rect" coords="20, 10, 300, 290" href="home.html" alt="Home page">

The attribute reads 'Home page', describing that the <area> takes us to the home page of the underlying website.

Almost always, make sure to have alt set on every <area> element to make it clear to screen readers the context of the <area>, that is, what it links to.

In addition to this, we can also set the title attribute on an <area>.

If you recall the behavior of title from previous chapters of this course, if we hover over an <area> containing a title, the browser will show a tooltip reading the title text. This can be especially useful for non-screen-reader users who just want to know what an <area> relates to.

A simple example

(Drumroll.) It's finally time to create a fully-fledged image map in HTML, utilizing each of the three shapes for defining hotspots: rectangle, circle, and polygon.

The image we'll be basing the image map on is as follows:

Image map example
Image map example

A demonstrative example, and honestly quite an exaggerated one for the purpose of this chapter, here we have a local promotion banner image for Codeguage. There are three regions intended to be hotspots in this image:

  • The logo should point to the home page.
  • The button reading 'Explore Courses' should point to the courses page.
  • The top-right corner triangle reading 'About us' should point to the about page.

The following illustration depicts the coordinates of each of these locations relative to the top-left corner of the image:

Image map example with labeled shapes and coordinates
Image map example with labeled shapes and coordinates

We have all the necessary information required to produce an image map for this very image. So let's go on and do this.

First things first, let's start with the <img> element where the map will ultimately be used. The image has intrinsic dimensions of 647 x 271 pixels:

<img src="image-map-example.png" width="647" height="271" alt="Codeguage courses promotion banner">

Next, let's define the <map> and link it to the <img>:

<img src="image-map-example.png" width="647" height="271" alt="Codeguage courses promotion banner" usemap="#m1">

<map name="m1"></map>

So far, so good.

The final thing left now is to define the individual hotspot areas using <area>:

<map name="m1">
   <area shape="rect" coords="38, 34, 180, 67" href="/">
   <area shape="circle" coords="519, 175, 66" href="/courses/">
   <area shape="poly" coords="562, 0, 647, 0, 647, 85" href="/about">

Precisely speaking, the above HTML does define the minimal stuff for the browser to be able to produce an image map over the image. However, as we learnt in this chapter, there are two other equally useful pieces of information missing from all <area>s — alt and title.

The alt attribute helps give context to a given <area>, specifying exactly what it points to (similar, in effect, to the content of an <a> element). The title attribute gives a handy tooltip feature to an <area> when we hover on it.

Let's add both these attributes to each <area> now:

<map name="m1">
   <area shape="rect" coords="38, 34, 180, 67" href="/" alt="Home" title="Home">
   <area shape="circle" coords="519, 175, 66" href="/courses/" alt="Explore courses" title="Explore courses">
   <area shape="poly" coords="562, 0, 647, 0, 647, 85" href="/about" alt="About us" title="About us">

Perfect And this completes the image map. Let's see it in action:

Live Example

Two words: Great job!

Image map generators

Now, keep in mind that, although in the example above we presented all the coordinates explicitly, in creating an image map for an image on a real website, we won't have these coordinates.

So how do we figure them out?

Well, more often than not, we absolutely don't have to. Image map generation programs automatically handle all this complexity for us.

We draw rectangles, circles, and polygons on top of the image using our mouse. Then, once we're done, the program emits <map> code which we can copy/paste into our website where we want the image map. is such a program, available online and free to use. So is Image Map Generator - Even some design software, such as Figma, have plugins available for creating image maps.

Things to note

A single <map> can be associated with multiple <img>s

Contrary to what one might think, one single <map> element can be associated with multiple <img> elements on a webpage.

<map name="image-map"></map>

<img usemap="#image-map" src="image-1.png">
<img usemap="#image-map" src="image-2.png">
<img usemap="#image-map" src="image-3.png">

However, quite obviously, there isn't much reason to do so because if we're using the same map for multiple images, then the images must somehow, in one way or the other, be the same.

A <map> can contain other elements besides <area>

Contrary to what we might assume at the first glance, the <map> element, although typically associated with having <area> elements only, can contain other elements as well.

For example, it's perfectly valid in HTML to have a <p> inside a <map>. Similarly, it's also valid to have an <a> element inside a <map>.

This behavior is allowed perhaps to make it easy for HTML developers to include link-related information right next to an <area> inside a map as we define it, rather than have to go to another part of the HTML document to write out that information.

The order of <area> elements matters

The order in which <area> elements appear in a <map> matters.

For example, if we tab through a webpage (i.e. navigate through links and buttons using the Tab key) and come across an image map, the first <area> element will receive focus first, then the second one, then the third one, and so on.

Switching the order of <area> elements in the HTML will, therefore, quite obviously change the order of tab-focus of each <area>.

Most importantly, though, later <area>s appear beneath previous <area>s. This very fact makes a difference in a case where we have exclusive hotspots in an image map, i.e. shapes on top of shapes to be excluded from being considered in a hotspot.

This is because it's only in such a case where two shapes overlap in an image map, and likewise the whole idea of ordering becomes more important than ever before.

For example, in the image map example above, for the sake of demonstration, let's say we want a small square area — (38, 34) to (72, 67) excluded from the begining of the rectangle box representing the logo.

We'll need to write the following, with the exclusive <area> being defined before the rectangle <area> denoting the logo:

<map name="m1">
<area shape="rect" coords="38, 34, 72, 67">
<area shape="rect" coords="38, 34, 180, 67" href="/" alt="Home" title="Home"> <area shape="circle" coords="519, 175, 66" href="/courses/" alt="Explore courses" title="Explore courses"> <area shape="poly" coords="562, 0, 647, 0, 647, 85" href="/about" alt="About us" title="About us"> </map>

Live Example

In the linked example above, try hovering over the square Codeguage icon — you won't get a visual cue that the region is clickable because ...well... it really isn't, thanks to the specification of the non-href <area>.

If we swap the positions of the respective <area>s, however, we would a much different result:

<map name="m1">
<area shape="rect" coords="38, 34, 180, 67" href="/" alt="Home" title="Home"> <area shape="rect" coords="38, 34, 72, 67">
<area shape="circle" coords="519, 175, 66" href="/courses/" alt="Explore courses" title="Explore courses"> <area shape="poly" coords="562, 0, 647, 0, 647, 85" href="/about" alt="About us" title="About us"> </map>

Live Example

In the linked page above, again, try hovering over the square Codeguage icon. This time, it'll be clickable despite the fact that we have an exclusive <area> in the map.

The reason why the exclusive <area> doesn't get considered is its positioning — it comes after the first <area> and thus gets positioned beneath it, effectively not able to have any mouse pointer sight.

Image maps aren't responsive inherently

Out of the box, image maps are NOT responsive. The coordinates that we specify in coords are all absolute coordinates, computed relative to the top-left corner of the respective image.

However, this doesn't meant that there is no way to make an image map responsive. There surely is one, it's just that it's not in the scope of HTML alone.

To make an image map responsive, we need the power of JavaScript.

The basic idea is that as the browser window is resized and, likewise, an image changes its dimensions (given that it's responsive), the coordinates of each and every <area> in the image map are scaled up or scaled down to cater to the increased or decreased size of the image, respectively.

As a quick example, if an image goes from a width of 300px to a width of 600px, the horizontal dimension has clearly doubled, and so has the vertical dimension; thus, a point (11, 30) will become (22, 60).

In conclusion

Today, as of 2024, image maps might certainly not be in mainstream usage out there, given that much more robust alternatives are available at our dispense — the likes of ever-more powerful CSS, and SVG.

However, this doesn't mean that there really isn't any use case where image maps won't turn out to be handy. As a quick instance, suppose we have a world map, showcasing different countries; in this case, an image map can be used to make each country's area a hotspot, linked to a part of the website related to that country.

Working with image maps isn't really any difficult, thanks to a good design of the <map> and <area> elements. Moreover, typically, image maps aren't hand-coded and instead created by programs, which makes the generation process a lot easier.

"I created Codeguage to save you from falling into the same learning conundrums that I fell into."

— Bilal Adnan, Founder of Codeguage