Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

HTML <img> usemap Attribute

❮ HTML <img> tag

Example

An image map, with clickable areas:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
Try it Yourself »

Definition and Usage

The usemap attribute specifies an image as a client-side image map (an image map is an image with clickable areas).

The usemap attribute is associated with a <map> element's name attribute, and creates a relationship between the <img> and the <map>.

Note: The usemap attribute cannot be used if the <img> element is a descendant of an <a> or <button> element.


Browser Support

Attribute
usemap Yes Yes Yes Yes Yes

Syntax

<img usemap="#mapname">

Attribute Values

Value Description
#mapname A hash character ("#") plus the name of the <map> element to use

❮ HTML <img> tag
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.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.