How to Remove HTML element from DOM using AngularJS ?

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

Last Updated : 24 Jun, 2024

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:

<area> Contents </area>

Example: The example below shows how to create an area inside an image-map using HTML5.

html

<!DOCTYPE html>
<html>

<body style="text-align: center">
	<h2>
		An area inside
		an image-map
	</h2>
	<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png" 
         alt="" width="300"
		 height="119" 
         class="aligncenter size-medium wp-image-910965" 
         usemap="#shapemap" />

	<map name="shapemap">

		<!-- Area tag contained image. -->
		<area shape="poly" coords="59, 31, 28, 83, 91, 83" href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165802/area2.png" 
              alt="Triangle">

		<area shape="circle" coords="155, 56, 26" href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165934/area3.png" 
              alt="Circle">

		<area shape="rect" coords="224, 30, 276, 82" href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227170021/area4.png" 
              alt="Square">
	</map>
</body>

</html>

Output:

mapimg

How to Remove HTML element from DOM using AngularJS ?

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 Avatar Images using HTML and CSS ?

This article will show you how to create an Avatar Image with the help of HTML and CSS. An Avatar is a visual representation of a user, often used in user profiles or comment sections on websites. Here, we have created a GFG logo avatar image. This avatar has 100px width and height, and border-radiu

How To Create a Thumbnail Image using HTML and CSS ?

The thumbnail image is used to add a 1px rounded border around the image. A thumbnail is a small size image that represents a larger image. The thumbnail is the image that is displayed as a preview of the video. It is used to represent what the video contains or what it is related to. It is displaye

How to Create an Image Overlay Icon using HTML and CSS ?

Image overlay Icon can be an impressive addition to interactive detail or a set of features for your website. This article content will divide the task into two sections, the first section creating the structure and attach the link for the icon. In the second section, we will design the structure us

How to create an image acting as a submit button using HTML5 ?

In this article, we will learn how to create an image that acts as a submit button i.e. whenever we click on an image in the form, it will be automatically submitted to the server. The default type of <input> type attribute is text. Here, we use a simple approach to complete the task. Syntax

How to set caption for an image using HTML ?

A caption for an image is a short description for a title that explains the image, providing context or additional information. In HTML, add a caption to an image by using the <figure> tag for the image and the <figcaption> tag below it for the caption text. Syntax <figcaption> Fig

How to create image slider using HTML CSS and JavaScript ?

An image slide, or slideshow, is a dynamic display of images that automatically transitions from one to the next, often with animations. To create an image slide, use HTML to structure the images, CSS for styling and animations, and JavaScript to control the timing and transitions between images. Ap

How to create swinging Image Hanger using HTML and CSS ?

In this article, we will learn how to create a type of Image Hanger that undergoes a swinging motion using HTML and CSS. This can be used to add interactivity to the page or highlight an image to draw attention. Approach: We will first create an HTML file in which we are going to add an image for ou

How to create a Hero Image using HTML and CSS ?

A Hero Image is a large image with text, often placed at the top of a webpage. Hero images can be designed using HTML and CSS. This article contains two sections. The first section attaches the image and designs the basic structure. The second section designs the images and texts on the images. The

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