HTML Images - Image Maps

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).

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:

Defining the idea more precisely:

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.

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.

As the name tells it all:

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

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.

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.

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:

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>:

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:

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:

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.

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.

(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:

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:

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">
</map>

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">
</map>

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

Live Example

Two words: Great job!

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.

Image-Map.net is such a program, available online and free to use. So is Image Map Generator - Fla-shop.com. Even some design software, such as Figma, have plugins available for creating image maps.

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).

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.