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

Last update on February 09 2024 12:52:56 (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 server-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 -->
<a href="area.map"><!-- Anchor element linking to the server-side image map file (area.map) -->
<img src="https://www.w3resource.com/w3r_images/html-area-element.png" alt="area example " width="308" height="190" border="0" usemap="#Map"><!-- Image element specifying the source URL of the image, alternate text, dimensions, border, and associated server-side image map -->
<map name="Map"><!-- Server-side image map definition 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 server-side image map -->
</body><!-- Closing tag for the document's body section -->
</html><!-- Closing tag for the root element of the HTML document -->

Explanation:

This HTML code demonstrates how to specify an image as a server-side image map.
An anchor <a> element is used to link to the server-side image map file named "area.map".
An image <img> element is included with the source URL pointing to the image "https://www.w3resource.com/w3r_images/html-area-element.png". It also includes attributes such as alt for alternate text, width and height for dimensions, border for border styling, and usemap to associate it with the server-side image map.
The server-side image map is defined using a <map> element with the name attribute set to "Map".
Multiple <area> elements within the <map> element define clickable regions on the image. Each <area> element specifies the shape of the region (shape attribute), coordinates (coords attribute), target URL (href attribute), and alternate text (alt attribute).
In this example, there are three <area> elements: two rectangular regions and one circular region.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page