Learn HTML

"Are you looking to learn HTML from scratch? Look no further! Our HTML course is designed for both beginners and advanced learners who want to master the fundamental concepts of HTML. Our comprehensive course covers everything from the basic concepts of HTML, including tags, attributes, and elements, to the more advanced concepts such as multimedia, responsive design, and accessibility."

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.



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">

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.



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">

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.



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.



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.



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: