In this tutorial, I will take you through the usage of html image maps with best examples.

HTML Image Maps

What is Image Mapping?

Image Map is a list of coordinates relating to a specific Image that allows users to access different web pages by clicking on different areas of an Image.

Client side Image Mapping

There are two types of Image Maps – Client Side Image Maps and Server side Image Maps. Here we are learning how to a Client Side Image Maps by using HTML. With a client side Image Map, you can specify a list of areas that will be used as the links.

The < map > tag is used to define a client-side Image Map. Inside this tag, you will specify where the clickable areas are with the HTML < area > tag.

<map name="nextmap">
<area shape="rect" coords="148,5,262,36" href="hello.html">
</map>

There are three shapes commonly used in Image Maps , they are :

RECT (left, top, right, bottom)

CIRCLE (center-x, center-y, radius)

POLY (x1, y1, x2, y2, .,.)

How to find the Image Co-ordinates ?

You can easily find the co-ordinates of an image by insert it into an image editor such as Paintbrush, and move the mouse around your desired area , so that you can find its co-ordinates .

Also Read: Learn HTML Tables

References: More on HTML Image Maps