HTML Image Maps

HTML image maps are used to create clickable regions on an image that link to different pages or sections of a web page. These areas, known as "hotspots", can be linked to different web pages or sections within the same page. 

HTML Image Maps allow you to create clickable areas on an image, turning specific regions of the image into interactive links. Each clickable area in the image map is defined by its coordinates (x, y) and a shape (rectangular, circular, or polygonal). When a user clicks on one of these defined areas, they are redirected to a specified URL or action.

Syntax

You need to use the <map> and <area> tags. The <map> tag defines the map and the <area> tags define the clickable areas. Here is the syntax for creating image maps.

<img src="image.png" usemap="mapname">
<map name="mapname">
	<area shape="rect" coords="0,0,0,0" href="example.com">
</map>

To create an HTML Image Map, you need to follow these steps:

1. Prepare the image: First, you need an image that you want to use as the basis for your image map. It can be in common formats like JPEG, PNG, or GIF.
2. Create the image map: Use the <map> element to define the image map. Inside the <map> element, you define the clickable areas using <area> elements.
3. Define clickable areas: Within each <area> element, specify the shape, coordinates", and the link or action associated with it using the “shape”, “coords”, and “href” attributes, respectively.

Example

Here's an example:

<img src="world-map.png" alt="World map" usemap="#worldmap">
<map name="worldmap">
   <area shape="rect" coords="0,0,500,300" href="north-america.html" alt="North America">
   <area shape="rect" coords="500,0,1000,300" href="south-america.html" alt="South America">
   <area shape="rect" coords="0,300,500,600" href="europe.html" alt="Europe">
   <area shape="rect" coords="500,300,1000,600" href="asia.html" alt="Asia">
</map>

In this example, the <img> tag displays an image of a world map. The usemap attribute points to the name of the image map (#worldmap). The <map> tag defines the map and the <area> tags define the clickable areas. The shape attribute specifies the shape of the clickable area (in this case, rectangles) and the coords attribute specifies the coordinates of the area. The href attribute specifies the URL of the page that the area links to, and the alt attribute provides alternative text for the area.

Shapes

HTML supports several shapes for image maps, including rectangles, circles, and polygons. The “shape” attribute is used to specify the shape of the clickable area, and the coords attribute is used to specify the coordinates of the area. The syntax for the coords attribute varies depending on the shape of the area.

Benefits

Image maps are a useful tool for creating interactive and engaging web pages. They can be used to provide additional information or navigation options to the user, and can be a more efficient way to link to multiple pages or sections than using individual links.

Tips

Here are some tips to keep in mind when working with HTML Image Maps:

1. Make sure your image is clear and has distinct regions for clicking.
2. Use appropriate shapes (circles, rectangles, or polygons) that fit the clickable area accurately.
3. Test the image map across different browsers and devices to ensure compatibility.

Overall, image maps are a valuable feature of HTML that can help you create more dynamic and engaging web pages.

Watch this Chapter Video on YouTube: