What is image map in html

: The Image Map element

The name attribute gives the map a name so that it can be referenced. The attribute must be present and must have a non-empty value with no space characters. The value of the name attribute must not be equal to the value of the name attribute of another element in the same document. If the id attribute is also specified, both attributes must have the same value.

Examples

Image map with two areas

Click the left-hand parrot for JavaScript, or the right-hand parrot for CSS.

HTML

map name="primary"> area shape="circle" coords="75,75,75" href="https://developer.mozilla.org/docs/Web/JavaScript" target="_blank" alt="JavaScript" /> area shape="circle" coords="275,75,75" href="https://developer.mozilla.org/docs/Web/CSS" target="_blank" alt="CSS" /> map> img usemap="#primary" src="parrots.jpg" alt="350 x 150 picture of two parrots" /> 

Result

Technical summary

Content categories	Flow content, phrasing content, palpable content.
Permitted content	Any transparent element.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts phrasing content.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	No role permitted
DOM interface	HTMLMapElement

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 13, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

HTML Image Maps

With HTML image maps, you can create clickable areas on an image.

Image Maps

The HTML tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more tags.

Try to click on the computer, phone, or the cup of coffee in the image below:

Example

Here is the HTML source code for the image map above:

How Does it Work?

The idea behind an image map is that you should be able to perform different actions depending on where in the image you click.

To create an image map you need an image, and some HTML code that describes the clickable areas.

The Image

The image is inserted using the tag. The only difference from other images is that you must add a usemap attribute:

The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map.

Tip: You can use any image as an image map!

Create Image Map

The element is used to create an image map, and is linked to the image by using the required name attribute:

The name attribute must have the same value as the ‘s usemap attribute .

The Areas

Then, add the clickable areas.

A clickable area is defined using an element.

Shape

You must define the shape of the clickable area, and you can choose one of these values:

• rect — defines a rectangular region
• circle — defines a circular region
• poly — defines a polygonal region
• default — defines the entire region

You must also define some coordinates to be able to place the clickable area onto the image.

Shape=»rect»

The coordinates for shape=»rect» come in pairs, one for the x-axis and one for the y-axis.

So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels from the top:

The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels from the top:

Now we have enough data to create a clickable rectangular area:

Example

This is the area that becomes clickable and will send the user to the page «computer.htm»:

Shape=»circle»

To add a circle area, first locate the coordinates of the center of the circle:

Then specify the radius of the circle:

Now you have enough data to create a clickable circular area:

Example

This is the area that becomes clickable and will send the user to the page «coffee.htm»:

Shape=»poly»

The shape=»poly» contains several coordinate points, which creates a shape formed with straight lines (a polygon).

This can be used to create any shape.

Like maybe a croissant shape!

How can we make the croissant in the image below become a clickable link?

We have to find the x and y coordinates for all edges of the croissant:

The coordinates come in pairs, one for the x-axis and one for the y-axis:

Example

This is the area that becomes clickable and will send the user to the page «croissant.htm»:

Image Map and JavaScript

A clickable area can also trigger a JavaScript function.

Add a click event to the element to execute a JavaScript function:

Example

Here, we use the onclick attribute to execute a JavaScript function when the area is clicked:

Chapter Summary

• Use the HTML element to define an image map
• Use the HTML element to define the clickable areas in the image map
• Use the HTML usemap attribute of the element to point to an image map

HTML Image Tags

Tag	Description
	Defines an image
	Defines an image map
	Defines a clickable area inside an image map
	Defines a container for multiple image resources

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник

HTML Image Maps

Oftentimes, you may have visited websites where you could find a link like this: “Visit the link to learn more”. As a result, if you click on this, you will be taken to a different website. In the same way, HTML’s image mapping function enables us to add clickable links to images. The page will direct us to another source when you click on that specified area.

What are HTML Image Maps?

The image map is a picture with areas that can be clicked. To make an image map in HTML, the “ ” element is utilized. Moreover, one or more “ ” tags are added within the “” element to specify the areas.

The syntax to specify image maps in an HTML document is mentioned below:

The “ ” element is defined with the following attributes:

• “src” specifies the image path.
• “alt” shows an alternate text when an image cannot load.
• “usemap” is specified to make the image areas clickable. To make a link, its value must be the same as the class or id of the “” element.

The “ ” element is added with the following attributes:

• “shape” specifies the area size of an HTML “ ” element.
• “coords” attribute defines the coordinates of the clickable area.
• “href” attribute set out the URL of the source.

How to Create Image Maps in HTML Document?

To create an image map in an HTML document, check out the given instructions:

• In HTML, add a “ ” element, and assign a class “image-map”.
• Within this div, add an “ ” element to add an image associated with the above-discussed attributes.
• Then, add an HTML “ ” element and assign it the “clickspace” name.
• Note that the “usemap” attribute is assigned the name “#clickspace” pointing to the “name” attribute of the “” tag.
• Inside it, add the “ ” tag with the above-stated attributes:

Let’s move toward the CSS section to adjust the size of the image.

Style “” in CSS

Utilize the “.image-map” class to access the “ ” element and apply the following CSS properties:

Here is the description of the mentioned CSS properties:

• The “width” property sets the div element’s width.
• The “margin” property adds more room around the element.

Style “img” Element

See, the area coordinates specified in the “coords” attribute are now clickable:

In the next section, we will learn how to link the image map to another source.

How to Create an Image Map Linked to Other Page?

Create another HTML page with the extension “.html” by following the steps mentioned below:

• In our case, we give it the name “laptop.html”.
• Add a div element and assign it a class “laptop-img”.
• Then, place an image using the “ ” element and associate the “src” and “width” attributes.
• Next, specify a paragraph using the “ ” element:

A laptop is a portable computer that can be moved and used in a variety of settings. < / p >

In CSS, specify the following CSS properties to the “laptop-img” class:

Now, we will link the “laptop.html” page to an image “ ” element of the first page. To do so, specify the URL of the page to the “href” attribute of the “” element as shown below:

We have successfully learned what image maps are and how they are linked with other sources.

Conclusion

The HTML “ ” element is utilized to create an image map or an image with clickable areas. To define the image’s clickable areas, one or more “ ” tags are added within the “” element. Moreover, the attributes associated with the “” tag are “shape”, “coords”, and “href”. This post has illustrated how to create HTML image maps with an example.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник

HTML Tag

The tag is used to define an image map. An image map is an image with clickable areas.

Browser Support

Attributes

Global Attributes

Event Attributes

More Examples

Example

Another image map, with clickable areas:

usemap=»#planetmap»>

Related Pages

Default CSS Settings

Most browsers will display the element with the following default values:

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Читайте также:  Cpp working with strings