How to Create Image Maps in HTML?

How to Create Image Maps in HTML?

Last Updated : 15 Oct, 2024

Image maps in HTML5 allow you to make certain areas of an image clickable, leading users to different links or triggering specific actions. The clickable areas (also known as hotspots) are defined using the <area> tag, while the <map> tag is used to specify the map itself.

What Is an Image Map?

An image map is an image with clickable areas, defined by coordinates. When a user clicks on a defined section of the image, they are redirected to a URL, or an action is performed. This is useful for things like:

Navigational menus
Interactive infographics
Clickable charts or diagrams

Syntax:

<map name="map-name">
  <area shape="shape" coords="x1, y1, x2, y2" href="URL">
</map>

Attribute value:

name: It is used to associate the map with the image in which it is used.

Note: The name attribute in the map must have the same value as the image's usemap attribute.

Example: Creating a Simple Image Map in HTML5

Here’s an example of creating a clickable image map where a specific area redirects to a website.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <img src="https://media.geeksforgeeks.org/wp-content/uploads/array-2.png" 
         alt="gfgimage" usemap="#mapID">
    <map name="mapID">
        <area shape="rect" coords="34, 44, 270, 350" href="
        https://www.geeksforgeeks.org/data-structures/">
    </map>
</body>

</html>

Output:

How_to_Create_Image_Maps_in_HTML5

How to Create Image Maps in HTML?

M

manishkrjha

Improve

Article Tags :

Similar Reads

How to Create an Image Map in HTML ?

An image map is a graphical representation that allows you to define clickable areas (or "hotspots") within an image. Each hotspot can be associated with a hyperlink, making different parts of the image interactive. Image maps are commonly used for navigation menus, interactive diagrams, and geograp

How to create a client-side image-map in HTML5 ?

In this article, we will create a client-side image map by using an <img> tag. The <img> tag is used to add images on a webpage. This tag is an empty tag which means it can contain only a list of attributes and it has no closing tag. Syntax: <img src="url" alt="some_text" usemap="#map

How To Change Image Size In HTML?

To change the size of an image in HTML, you can use width and height attribute within <img> tag. Alternatively, we can use CSS properties to set or change the image size. Change image size feature is useful while developing a responsive web page.Table of ContentUsing HTML width and height Attr

How to Insert an Image in HTML?

To insert an image in HTML, you can use <img> tag. This tag uses the src attribute to define the URL of the image file. We can also use CSS to insert image in HTML.Table of ContentUsing img TagUsing background-image propertyInsert an Image using img TagThe <img> tag is the primary method

How to Add Image in HTML Table ?

Adding images to an HTML table can enhance the visual appeal and functionality of your webpage. Whether it is for displaying product images in an e-commerce website or adding profile pictures in a user list, images in tables are a common requirement. In this article, we will explore two methods to a