Images are a great way to add visual interest and interactivity to your web pages. One way to add interactivity to an image is to use an image map. An image map is an image that has been divided into clickable areas, allowing users to navigate to different parts of a web page or website. In this article, we will explore how to create an image map using HTML and JavaScript.

Creating an Image Map:

To create an image map, you need an image and a map element. The map element contains the clickable areas of the image, which are defined using area elements. Here’s an example:

php

<img src="image.jpg" usemap="#example">
<map name="example">
  <area shape="rect" coords="0,0,50,50" href="page1.html">
  <area shape="circle" coords="100,100,50" href="page2.html">
  <area shape="poly" coords="200,0,250,50,200,100,150,50" href="page3.html">
</map>

In this example, the img tag references an image file named “image.jpg” and the usemap attribute specifies the name of the map element, which is “example”. The map element contains three area elements that define the clickable areas of the image. Each area element specifies the shape of the area (rectangle, circle, or polygon) and the coords of the area. The href attribute specifies the URL of the page that the area links to.

Shape Attribute:

The shape attribute is used to specify the shape of the clickable area. There are three possible values for the shape attribute: rect, circle, and poly.

Rectangular Areas:

To define a rectangular area, set the shape attribute to “rect” and specify the coords of the area as two sets of x,y coordinates. The first set of coordinates specifies the top-left corner of the rectangle, and the second set of coordinates specifies the bottom-right corner of the rectangle. Here’s an example:

php

<area shape="rect" coords="0,0,50,50" href="page1.html">

In this example, the rectangular area has a top-left corner at (0,0) and a bottom-right corner at (50,50).

Circular Areas:

To define a circular area, set the shape attribute to “circle” and specify the coords of the area as three values: the x,y coordinates of the center of the circle and the radius of the circle. Here’s an example:

php

<area shape="circle" coords="100,100,50" href="page2.html">

In this example, the circular area has a center at (100,100) and a radius of 50 pixels.

Polygonal Areas:

To define a polygonal area, set the shape attribute to “poly” and specify the coords of the area as a series of x,y coordinates. The coordinates should be listed in clockwise order, starting at the top-left corner of the polygon. Here’s an example:

php

<area shape="poly" coords="200,0,250,50,200,100,150,50" href="page3.html">

In this example, the polygonal area has four vertices at (200,0), (250,50), (200,100), and (150,50).

Image Maps and JavaScript:

Image maps can be made even more interactive using JavaScript. For example, you can use JavaScript to highlight the currently selected area or to display information about the area when it is clicked.