Starting Point

Say you have a good-looking, sharp picture.

Wouldn't it be nice to have it reference some nice URL?

HTML can do that!

Simply wrap the <img> element in between anchor link tags. The following markup for instance:

      
      <a href="nice_url">
        <img
          src="img_url"
          alt="Nice sharp image" />
      </a>

Allows such a feat:

Wouldn't it be great to have it reference multiple URLs, according to which section of the image was clicked?

HTML can do that!

You just need to get acquainted with two new friends: <map> and <area>

Map

The <map> element is used primarily for two reasons:

To group <area> elements;
To provide an identifier through the name attribute, as to later reference the map itself.

      
      <map name="mapName">
        <area/>
        <area/>
      </map>

Area

The <area> element is instead used to define a region, or regions, responsible for specified URLs.

The element itself has several attributes, each solving its own purpose:

shape defines the possible shape of the reference-able area (such as a rectangle, circle, polygon);
coords specifies the coordinates of the area. The values included with this attribute depend on the chosen shape;
href details the URL referenced by the area;
target dictates where the referenced link it's going to be opened, similalry to the attribute bearing the same name for anchor link elements;
alt includes some text, to be shown in case the browser fails to load the image, similarly to the attribute bearing the same name for image elements.

      
        <area
          shape="circle"
          coords="100, 100, 50"
          href="nice_url"
          target="_blank"
          alt="Nice sharp area" />

Map & Area

To fulfill the overarching purpose, two additional steps are required

Nest the <area> element(s) in a wrapping <map> element;

      
      <map name="mapName">
        <area
        shape="circle"
        coords="100, 100, 50"
        href="nice_url"
        target="_blank"
        alt="Nice sharp area" />
      </map>

Reference the map in the usemap attribute of an <img/> element, alongside its other attributes.

      
      <img
        usemap="#mapName"
        src="img_url"
        alt="Nice sharp image"/>

In Practice

Including the previous logic for the image included in the beginning of this simple tutorial, circle areas allow to have each "thought" bubble reference a particular URL

All with the following source code:

      
      <map name="bubbles">
        <area
          shape="circle"
          coords="100, 80, 50"
          href="#"
        />

        <area
          shape="circle"
          coords="100, 230, 50"
          href="#"
        />

        <area
          shape="circle"
          coords="120, 350, 40"
          href="#"
        />

        <area
          shape="circle"
          coords="600, 80, 50"
          href="#"
        />

        <area
          shape="circle"
          coords="600, 230, 50"
          href="#"
        />

        <area
          shape="circle"
          coords="580, 350, 40"
          href="#"
        />

      </map>

      <img
        usemap="#bubbles"
        src="img_url"
        alt="Picture of a chalk-board"/>

Parting Thoughts

Together, the <map> and <area> elements provide intriguing possibilities.

That being said, you should consider the following:

The units specified in the <area> element refer to pixel unit.
Change the size of the image and the elements won't paint a pretty picture anymore.
I spent only an evening with the elements and the following MDN pages:
- map
- area
You can definitely achieve a better result than the one included in this page.

Other than that, tinker and experiment with the HTML elements at will. Hit the tab key to "visualize" the areas specified by the elements and have a blast.

I sure had some fun #gainwithstewartilondanga