Categories
Web development

HTML map and area tags

HTML map and area tags

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:

homeOffice laptop 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:

HTML meter tag

HTML fieldset tag & legend tag

HTML input tag