The <area> tag in HTML is used to define clickable areas within an image map. When a user clicks on a defined area, they are redirected to a specific URL or action. This tag is often used in conjunction with the <map> tag, which defines the entire image map.
Here’s a step-by-step tutorial on how to use the <area> tag:
Step 1: Create an image map First, you need to create an image map using the <map> tag. The <map> tag should be placed immediately after the <img> tag that references the image. Here’s an example:
<img src=”example.png” alt=”example image” usemap=”#examplemap”>
<map name=”examplemap”>
<!– area tags will be inserted here –>
</map>
Step 2: Add <area> tags Next, you need to define clickable areas within the image map using <area> tags. The <area> tag has several attributes that you can use to specify the shape and location of the clickable area, as well as the action to be taken when the area is clicked.
Here are the attributes you can use:
shape: Specifies the shape of the clickable area. Valid values are “rect” (rectangle), “circle”, “poly” (polygon), and “default” (entire image).coords: Specifies the coordinates of the clickable area. The format of the coordinates depends on the shape attribute.href: Specifies the URL or action to be taken when the area is clicked.target: Specifies where to open the linked document. Valid values are “_self” (open in the same frame), “_blank” (open in a new window), “_parent” (open in the parent frame), and “_top” (open in the topmost frame).alt: Specifies the alternate text to be displayed when the image is not available.
Here’s an example of how to create a rectangular clickable area:
<area shape=”rect” coords=”0,0,50,50″ href=”https://www.example.com” alt=”example link”>
This creates a rectangular clickable area with the top-left corner at (0,0) and the bottom-right corner at (50,50). When the area is clicked, the user will be redirected to “https://www.example.com”. The alternate text “example link” will be displayed if the image is not available.
Step 3: Repeat for additional areas You can add additional <area> tags to define more clickable areas within the image map. Here’s an example of how to create a circular clickable area:
<area shape=”circle” coords=”100,100,50″ href=”https://www.example.com” alt=”example link”>
This creates a circular clickable area with the center at (100,100) and a radius of 50 pixels. When the area is clicked, the user will be redirected to “https://www.example.com”.
Step 4: Close the image map Finally, you need to close the <map> tag to complete the image map:
</map>
That’s it! You now have a fully functional image map with clickable areas defined by <area> tags.
