HTML Image Maps

 An HTML image map is a way to create clickable areas on an image, allowing different parts of the image to link to different destinations. This is done using the <map> and <area> elements.

Here's how you can create an HTML image map:

Basic Structure

<img src="image.jpg" usemap="#image-map" alt="A description of the image">
<map name="image-map">
  <area shape="rect" coords="34,44,270,350" alt="Description" href="link1.html">
  <area shape="circle" coords="100,100,50" alt="Description" href="link2.html">
  <area shape="poly" coords="130,130,150,170,170,140" alt="Description" href="link3.html">
</map>

Key Components:

1. <img> tag: The image on which you want to apply the map. The usemap attribute links the image to the image map by referencing the name of the map (in this case, #image-map).

2. <map> tag: This defines the image map. The name attribute is used to link the map to the image via the usemap attribute.

3. <area> tag: Defines clickable areas on the image. Each area has:

   • shape: Defines the shape of the clickable area (e.g., rect for rectangle, circle for circle, poly for polygon).
   • coords: Specifies the coordinates for the shape. The format differs depending on the shape (e.g., for a rectangle, it's "x1,y1,x2,y2").
   • alt: A description of the area for accessibility.
   • href: The destination URL for the link.

Shape Coordinates:

• Rectangle (rect): coords="x1,y1,x2,y2" (top-left and bottom-right corners)
• Circle (circle): coords="x,y,radius" (center x, center y, and radius)
• Polygon (poly): coords="x1,y1,x2,y2,..." (a series of x,y points that define the polygon)

Example of a Rectangle Image Map

<img src="house.jpg" usemap="#house-map" alt="House Map">
<map name="house-map">
  <area shape="rect" coords="0,0,100,100" alt="Kitchen" href="kitchen.html">
  <area shape="rect" coords="100,0,200,100" alt="Living Room" href="living-room.html">
  <area shape="rect" coords="0,100,100,200" alt="Bedroom" href="bedroom.html">
</map>

In this example, three clickable areas are created on the image house.jpg, each linking to different parts of the house. The coordinates define where each clickable region is located.

Image maps are commonly used in interactive graphics, diagrams, and when a single image contains multiple clickable sections.