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

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

Last Updated : 20 Oct, 2020

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="#mapname">

Example:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        Define a client-side
        image-map
    </title>
</head>

<body>
    <h2>
        HTML5: How to define a
        client-side image-map?
    </h2>

    <h4>
        Inserted image
        using <img> tag:
    </h4>
    <img src=
"https://www.geeksforgeeks.org/wp-content/uploads/gfgLogo.png"
    alt="GeeksforGeeks logo">
</body>

</html>

Output:

Supported Browsers:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

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

M

manaschhabra2

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 Image Maps in HTML?

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 Imag

How to Generate Video from Images in HTML5 ?

Generating a video from images in HTML5 involves utilizing HTML, CSS, and JavaScript to dynamically create a video by stitching together a sequence of images. Additionally, the transition effects and frame rate control ensure a seamless and optimized viewing experience for the generated video. Appro

How to create an area inside an image-map using HTML?

To define clickable regions within an image map in an HTML document, use the <area> tag. This tag directs users to different links when they click on specific areas of the mapped image. It is nested within the <map> tag as a child element. In HTML, <area> is self-closing. Syntax:

How to create an image map in JavaScript ?

An image map is nothing but an image that is broken into various hotspots and each hotspot will take you to a different file. Hotspots are nothing but clickable areas which we create on an image by using the <area> tag. This type of map is called a client-side image map as the map is embedded