HTML5: How to specify an image as a client-side image-map?

Last update on February 09 2024 12:53:45 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration specifying the document type -->
<html><!-- Opening tag for the root element of the HTML document -->
<head><!-- Opening tag for the document's header section -->
<meta charset="utf-8"><!-- Metadata tag specifying the character encoding of the document -->
<title>How to specify an image as a client-side image-map</title><!-- Title of the HTML document -->
</head><!-- Closing tag for the document's header section -->
<body><!-- Opening tag for the document's body section -->
<p>Click on the circle or on one of the shape to watch it closer:</p><!-- Paragraph providing instructions for interacting with the image map -->
<body><!-- Opening tag for the body section (incorrectly opened) -->
<img <!-- Image element specifying the source URL of the image, alternate text, dimensions, and associated client-side image map -->
src="https://www.w3resource.com/w3r_images/html-area-element.png" alt="area example" <!-- Source URL of the image and alternate text -->
width="308" height="190" border="0" <!-- Dimensions of the image and border styling -->
usemap="#Map"><!-- Attribute associating the image with the client-side image map named "Map" -->
<map name="Map"><!-- Definition of the client-side image map with the name attribute "Map" -->
<area shape="rect" coords="8,5,100,77" href="https://www.w3resource.com/mysql/mysql-tutorials.php" target="_blank" alt="mysql tutorial"><!-- Area element defining a rectangular clickable region with coordinates, target URL, and alternate text -->
<area shape="circle" coords="155,93,59" href="https://www.w3resource.com/php/php-home.php" target="_blank" alt="php tutorial"><!-- Area element defining a circular clickable region with coordinates, target URL, and alternate text -->
<area shape="rect" coords="197,136,306,188" href="https://www.w3resource.com/sql/sql-tutorials.php" alt="sql tutorials"><!-- Area element defining a rectangular clickable region with coordinates, target URL, and alternate text -->
</map><!-- Closing tag for the client-side image map -->
</body><!-- Closing tag for the body section (incorrectly placed) -->
</html><!-- Closing tag for the root element of the HTML document -->

Explanation:

This HTML code demonstrates how to specify an image as a client-side image map.
The <img> element is used to display the image and is associated with the client-side image map using the usemap attribute.
The <map> element defines the client-side image map with the name attribute "Map".
Inside the <map> element, multiple <area> elements define clickable regions on the image, each with its own shape, coordinates, target URL, and alternate text.

Live Demo :

See the Pen img-usemap-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page