The HTML tag <area>
is used in conjunction with the <map>
tag to define clickable areas within an image. These clickable areas are known as image maps and can be used to create interactive graphics, such as navigation menus or hotspots.
The <area>
tag is a self-closing tag and has several attributes that define the shape, size, and location of the clickable area. The most commonly used attributes are:
shape
: defines the shape of the clickable area. The possible values are "rect" (rectangle), "circle", "poly" (polygon), and "default" (used for the entire image).coords
: defines the coordinates of the clickable area. The values depend on the shape attribute. For example, if the shape is "rect", the coords attribute should have four values: x1, y1, x2, y2 (the top-left and bottom-right corners of the rectangle).href
: defines the URL of the page that will be loaded when the clickable area is clicked.alt
: defines the alternative text that will be displayed if the image cannot be loaded or if the user is using a screen reader.Here are some examples of how to use the <area>
tag:
In this example, we define a rectangular clickable area that links to Google's homepage:
<img src="map.png" alt="Map" usemap="#map"> <map name="map"> <area shape="rect" coords="0,0,100,100" href="https://www.google.com/" alt="Google"> </map>
The <img>
tag displays the image that contains the clickable area. The usemap
attribute specifies the name of the <map>
tag that defines the clickable areas.
The <map>
tag contains the <area>
tag that defines the clickable area. The name
attribute of the <map>
tag must match the usemap
attribute of the <img>
tag.
The shape
attribute is set to "rect" to define a rectangular clickable area. The coords
attribute specifies the coordinates of the top-left and bottom-right corners of the rectangle.
The href
attribute specifies the URL of the page that will be loaded when the clickable area is clicked. The alt
attribute specifies the alternative text that will be displayed if the image cannot be loaded or if the user is using a screen reader.
In this example, we define a circular clickable area that links to Wikipedia's homepage:
<img src="map.png" alt="Map" usemap="#map"> <map name="map"> <area shape="circle" coords="50,50,50" href="https://www.wikipedia.org/" alt="Wikipedia"> </map>
The shape
attribute is set to "circle" to define a circular clickable area. The coords
attribute specifies the coordinates of the center of the circle and its radius.
In this example, we define a polygonal clickable area that links to Amazon's homepage:
<img src="map.png" alt="Map" usemap="#map"> <map name="map"> <area shape="poly" coords="0,0,100,0,50,100" href="https://www.amazon.com/" alt="Amazon"> </map>
The shape
attribute is set to "poly" to define a polygonal clickable area. The coords
attribute specifies the coordinates of the vertices of the polygon.
In this example, we define a clickable area that covers the entire image and links to Microsoft's homepage:
<img src="map.png" alt="Map" usemap="#map"> <map name="map"> <area shape="default" href="https://www.microsoft.com/" alt="Microsoft"> </map>
The shape
attribute is set to "default" to define a clickable area that covers the entire image. The coords
attribute is not needed in this case.
These are just a few examples of how to use the <area>
tag. With some creativity, you can create complex image maps that enhance the user experience of your website.