w3resource

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

Go to Exercise page

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

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
YesYesYesYesYes

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.