HTML <img> usemap Attribute

HTML <img> tag

Definition and Usage

usemap Property defines the image as a client-side image mapping.

Image mapping refers to an image with clickable areas.

usemap Property corresponds to The <map> element associated with the name or id attribute to establish a relationship between <img> and <map>.

Note:Cannot be used if the <img> element is a descendant of an <a> or <button> element usemap Property.

Further Reading: Detailed Explanation of usemap Attribute

Example

Image mapping with clickable areas:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="Computer" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="Phone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Cup of coffee" href="coffee.html">
</map>

Try It Yourself

Syntax

<img usemap="#mapname">

Attribute Value

Value Description
#mapname The hash character (#) followed by the name of the <map> element to be used.

Further Reading: Detailed Explanation of usemap Attribute

usemap The attribute provides a "client-side" image mapping mechanism, effectively eliminating the server-side processing of mouse coordinates and the resulting network latency issues. Through special <map> and <area> tags, HTML creators can provide a mapping that describes the coordinates of the hyperlinked areas in the usemap image, which includes the corresponding hyperlinks URL. The value of the usemap attribute is a URL that points to a special <map> area. The browser on the user's computer will convert the coordinates of the mouse click on the image into specific actions, including loading and displaying another document.

Let us illustrate with an example. The following source code maps a 100x100 pixel image map.gif to 4 areas, and when the user clicks on one of these areas, they will be linked to different documents. Please note that in this <img> tag, we have effectively included the processing function for ismap image mapping, so that users with browsers that do not have the usemap processing function can handle image mapping through another means, namely the server-side mechanism:

<a href="/example/map">
  <img src="/i/map.gif" ismap="ismap" usemap="#map" />
</a>
<map name="map">
  <area coords="0,0,49,49" href="link1.html">
  <area coords="50,0,99,49" href="link2.html">
  <area coords="0,50,49,99" href="link3.html">
  <area coords="50,50,99,99" href="link4.html">
</map>

Differences in the application of ismap attribute and usemap attribute

Maps are a good example of applying the ismap and usemap attributes, for example, when browsing the website of a large company nationwide, users may click on the city where they live on the map to get the addresses and phone numbers of nearby retail stores, etc.

The benefit of using the usemap client-side image mapping is that it does not require a server or special server software, unlike the ismap mechanism, it can be used in non-web (no network) environments, such as using local files or CD-ROMs.

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

HTML <img> tag