<map>

The HTML <map> element creates a client-side image map, linking designated areas of an image to various URLs, while the <area> element identifies the clickable regions within the map.

`<map>` Tag

The <map> element works alongside <area> to make sections of an image clickable, directing users to different links.

Syntax

index.html

<map name="mapname">
  <area shape="rect|circle|poly" coords="x1,y1,x2,y2" href="url" alt="description">
  <!-- Additional <area> elements as needed -->
</map>

Example

Below is an interactive image with multiple clickable areas:

index.html

<img src="/placeholder.jpeg" usemap="#mapname" alt="Social Media">
<map name="mapname">
  <area shape="rect" coords="34,44,270,350" href="https://institute.qarpeo.com" alt="Link 1">
  <area shape="circle" coords="130,136,60" href="https://institute.qarpeo.com" alt="Link 2">
  <area shape="poly" coords="200,50,300,150,400,50" href="https://institute.qarpeo.com" alt="Link 3">
</map>

Image Usage

To associate an image with a map, the usemap attribute must reference the map's name:

index.html

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

The usemap value must begin with #, linking the image to the corresponding <map> element.

Any image can be transformed into a clickable map!

Creating an Image Map

To define clickable regions on an image, use the <map> element:

index.html

<map name="workmap">

The name attribute of <map> must match the usemap attribute in the <img> tag to establish the connection.

Defining Clickable Areas

Clickable sections within the image are specified using the <area> element.

Supported Shapes:

rect – Defines a rectangular region
circle – Creates a circular region
poly – Forms a polygonal area
default – Covers the entire image

Coordinates must be correctly assigned to position the clickable areas on the image.

Usage

Must be used alongside an <img> element using the usemap attribute.
Contains one or more <area> elements to define the interactive sections.

Attributes

Attribute	Description
`name`	Unique identifier for the image map (required)

Key Points

The coords attribute in <area> specifies the position of interactive zones.
The shape attribute in <area> determines the shape (rect, circle, poly).

<a> – Defines links
<area> – Creates clickable regions within an image map

HTML Image Elements

Tag	Purpose
`<img>`	Displays an image
`<map>`	Defines an image map
`<area>`	Specifies interactive areas in an image map
`<picture>`	Provides multiple image sources for adaptability

The <map> element is a powerful tool for creating interactive images by defining specific clickable areas, enabling users to navigate or take actions directly from the image. Paired with the <area> element, it allows precise control over the interactivity within an image, making it a versatile tool for web design.

<area>

The HTML <area> element specifies a clickable region within an image map, working alongside the <map> element to create interactive areas that link to other resources or pages.

Media

HTML media elements embed audio, video, and images, enhancing user engagement. Elements like (<audio>), (<video>), and (<img>) support attributes for playback, display, and accessibility, ensuring seamless experiences across devices.