What is the area element in an HTML5 image map?

The area element in HTML5 defines clickable regions on an image within a map element. 1) The shape attribute specifies the region’s shape (rect, circle, poly, or default). 2) The coords attribute provides shape-specific coordinates (e.g., x1,y1,x2,y2 for rect). 3) The href attribute sets the link destination. 4) The alt attribute ensures accessibility with alternative text. 5) The target attribute defines where to open the link (e.g., _blank). 6) The title attribute adds a tooltip. For example, an image of planets uses area tags to link different regions to respective planet pages, enabling navigation based on user clicks, making it ideal for interactive diagrams, menus, or illustrations without JavaScript.

The area element in an HTML5 image map defines a clickable region on an image. It is used inside the <map></map> element to specify interactive areas, such as rectangles, circles, or polygons, that can act as hyperlinks.

Each <area> tag represents one of these regions and can link to a URL, just like an anchor (<a></a>) tag. When a user clicks on that part of the image, the browser navigates to the specified destination.

Key attributes of the <area> element include:

• shape: Defines the shape of the area. Common values are:
  • rect (rectangle)
  • circle (circle)
  • poly (polygon)
  • default (entire image)
• coords: Specifies the coordinates of the shape, depending on the shape value:
  • For rect: x1,y1,x2,y2 (top-left and bottom-right corners)
  • For circle: x,y,radius (center point and radius)
  • For poly: x1,y1,x2,y2,... (list of vertex points)
• href: The URL the area links to (like the href in an <a></a> tag)
• alt: Provides alternative text for accessibility, similar to the alt attribute in <img src="/static/imghw/default1.png" data-src="planets.jpg" class="lazy" alt="What is the area element in an HTML5 image map?" >
• target: Specifies where to open the linked document (e.g., _blank, _self)
• title: Adds a tooltip that appears on hover

Example:

<img src="/static/imghw/default1.png"  data-src="planets.jpg"  class="lazy" alt="What is the area element in an HTML5 image map?" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercury.html" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.html" alt="Venus">
</map>

In this example, different parts of the image link to different pages, allowing navigation based on where the user clicks.

The <area> element is essential for creating interactive images without relying on JavaScript or external tools. It’s widely supported and useful for diagrams, image-based menus, or clickable illustrations.

Basically, it turns specific parts of an image into clickable links using defined shapes and coordinates.

The above is the detailed content of What is the area element in an HTML5 image map?. For more information, please follow other related articles on the PHP Chinese website!