Html image map jpg

: 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 image maps, you can add clickable areas on an image.

Image Maps

The tag defines an image-map. An image-map is an image with clickable areas.

Click on the computer, the phone, or the cup of coffee in the image below:

Example

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 a map containing some rules that describe 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.

Note: You can use any image as an image map.

The Map

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

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

Note: You may insert the element anywhere you like, it does not have to be inserted right after the image.

The Areas

Then add the clickable areas.

A clickable area is defined using an element.

Shape

You must define the shape of the 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

Coordinates

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

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

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 you have enough data to create a clickable rectangular area:

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

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:

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

name attribute of the tag is associated with the ‘s usemap attribute and creates a relationship between the image and the map.

The element contains a number of tags, that define the clickable areas in the image-map.

Image Map and JavaScript

A clickable area does not have to be a link to another page, it can also trigger a JavaScript function.

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

Example

You can 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 ‘s element usemap attribute to point to an image-map

Источник

HTML Image Maps

The HTML

Example

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.

Create Image Map

Then, add a