RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.w3resource.com/html-css-exercise/basic/img-ismap-answer.php below:

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

HTML5: How to specify an image as a server-side image-map?Last update on February 09 2024 12:53:47 (UTC/GMT +8 hours)

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 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

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4