How to Defines an area inside an image map in HTML ?


To define an area inside an image map in HTML, you can use the <area> tag. The <area> tag is used to define a clickable area within an image map.

Here's an example of how to define an area inside an image map:

<img src="example.jpg" usemap="#examplemap">

<map name="examplemap">
  <area shape="rect" coords="0,0,50,50" href="page1.html">
</map>

In this example, we have an image (example.jpg) and an image map (examplemap). The <area> tag is used to define a rectangular area (shape="rect") with coordinates (coords="0,0,50,50") that starts at the top left corner of the image (0,0) and ends at 50 pixels to the right and 50 pixels down. When this area is clicked, it will take the user to page1.html (href="page1.html").

There are several other shapes that can be used with the <area> tag, including circle, poly, and default. Here's an example of how to define a circular area:

<img src="example.jpg" usemap="#examplemap">

<map name="examplemap">
  <area shape="circle" coords="100,100,50" href="page2.html">
</map>

In this example, we have a circular area (shape="circle") with coordinates (coords="100,100,50") that defines a circle with a center at (100,100) and a radius of 50 pixels. When this area is clicked, it will take the user to page2.html.

It's important to note that the <map> tag must be used in conjunction with an <img> tag that has a usemap attribute that matches the name of the map.



About the author

William Pham is the Admin and primary author of Howto-Code.com. With over 10 years of experience in programming. William Pham is fluent in several programming languages, including Python, PHP, JavaScript, Java, C++.