Image maps

David Atanda — Sun, 25 Apr 2021 15:34:39 +0000

An image map is an image with specific clickable areas, and it’s defined with map tag. These areas are set using the <area> tag. Basically, this allows you to embed links in different parts of image that can lead to other pages, which is great for describing things within a picture.

Shape	Coordinates
rect	left, top, right, bottom
circle	center-x, center-y, radius
poly	x1, y1, x2, y2, .….
fault	Th entire region

For example, let’s use Africa’s map:

<map name="africamap">
          <area
            shape="poly"
            coords="414,289,412,263,422,248,419,233,430,212,446,209,459,215,488,217,510,213,529,210,539,222,543,234,527,254,517,269,507,287,469,281,479,296,476,311,499,313,440,302,433,291"
            target="_blank"
            alt="nigeria"
            href="https://en.wikipedia.org/wiki/Nigeria"
          />
</map>

We can have this replicated for each country, as seen here

DEV Community: David Atanda

Image maps