HTML Image Map is a graphical area on an image that, when clicked, triggers an action or links to another resource. It allows you to define multiple clickable regions within a single image, each with its own associated action or hyperlink. Image maps are commonly used for creating interactive diagrams, navigation menus, or clickable graphics.
Here's how to create an HTML image map:
1. Define the Image: First, you need to include the `<img>` element to display the image you want to use for the image map.
<img src="image.jpg" alt="Description of the image">
2. Define the Image Map: Use the `<map>` element to define the image map and give it a unique name using the `name` attribute.
<map name="example-map">
<!-- Define clickable regions here -->
</map>
3. Define Clickable Regions: Within the `<map>` element, define clickable regions using `<area>` elements. Each `<area>` element represents a clickable region on the image map.
<map name="example-map">
<area shape="rect" coords="0,0,100,100" href="page1.html" alt="Clickable Region 1">
<area shape="circle" coords="150,150,50" href="page2.html" alt="Clickable Region 2">
<area shape="poly" coords="200,200,250,250,300,200" href="page3.html" alt="Clickable Region 3">
</map>
- The `shape` attribute specifies the shape of the clickable region (`rect` for rectangle, `circle` for circle, `poly` for polygon).
- The `coords` attribute defines the coordinates of the clickable region. The format depends on the shape (e.g., for a rectangle: `x1,y1,x2,y2`).
- The `href` attribute specifies the URL to navigate to when the region is clicked.
- The `alt` attribute provides alternative text for accessibility.
4. Associate Image with Image Map: Use the `usemap` attribute on the `<img>` element to associate the image with the image map.
<img src="image.jpg" alt="Description of the image" usemap="#example-map">
With these steps, we can create an HTML image map that allows users to interact with specific regions of an image.