The HTML <map> element is used to specify an image map. An image map is an image with clickable areas.
The HTML <map> tag contains a number of HTML <area> tags, that specify the clickable areas in the image map.
Example:
<!DOCTYPE html>
<html>
<body>
<p>Click on the laptop, or the cup of coffee:</p>
<img src="https://lenadesign.org/wp-content/uploads/2021/06/homeOffice.jpg" alt="homeOffice" usemap="#workmap" width="640" height="480">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="laptop" href="https://lenadesign.org/wp-content/uploads/2021/06/laptop.jpg">
<area shape="circle" coords="337,300,44" alt="coffee" href="https://lenadesign.org/wp-content/uploads/2021/06/photoshop-gif.gif">
</map>
</body>
</html>Output:
Click on the laptop, or the cup of coffee:
Note: The usemap attribute in <img> is linked with the <map> element’s name attribute, and creates a connection between the image and the map.
The HTML <area> element specifies an area inside an image map.
Attributes:
alt (value- text) -defines an alternate text for the area.
coords (value- coordinates) – defines the coordinates of the area.
x1,y1,x2,y2 – defines the coordinates of the top-left and bottom-right corner (shape=”rect”).
x,y,radius – defines the coordinates of the circle center and the radius (shape=”circle”).
x1,y1,x2,y2,..,xn,yn – defines the coordinates of the edges of the polygon.
download (value- filename) – defines that the target will be downloaded when a user clicks on the hyperlink.
href (value- URL) – defines the hyperlink target for the area.
media (value- media query) – defines what device the target URL is optimized for.
referrerpolicy (value- no-referrer/ no-referrer-when-downgrade/ origin/ origin-when-cross-origin/ same-origin/ strict-origin-when-cross-origin/ unsafe-url) – defines which referrer information to send with the link.
rel (value- alternate/ author/ bookmark/ help/ license/ next/ nofollow/ noreferrer/ prefetch/ prev/ search/ tag) – defines the relationship between the current document and the target URL.
shape (value- default/ rect/ circle/ poly) – defines the shape of the area.
target (value- _blank/ _parent/ _self/ _top/ framename) – defines where to open the target URL.
type (value- media_type) – defines the media type of the target URL.
Enjoy coding!
Read also: