HTML <map> tag

Definition and Usage

Defines a client-side image-map. An image-map is an image with clickable regions.

Differences Between HTML and XHTML

NONE

Tips and Notes

Note: The area element is always nested inside the map element. The area element defines the regions in the image map.

Note: The usemap attribute in <img> refers to the id or name (browser dependant) attribute in <map>, therefore we have added both the id and name attributes to <map>.

Example

Source

Output

<p>Click on one of the planets:</p> <img src ="planets.gif" width ="145" height ="126" alt="Planets" usemap ="#planetmap" /> <map id ="planetmap" name="planetmap"> <area shape ="rect" coords ="0,0,82,126"   href ="sun.htm" target ="_blank"   alt="Sun" /> <area shape ="circle" coords ="90,58,3"   href ="mercur.htm" target ="_blank"   alt="Mercury" /> <area shape ="circle" coords ="124,58,8"   href ="venus.htm" target ="_blank"   alt="Venus" /> </map>

Click on one of the planets:

Required Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Optional Attributes

Standard Attributes

For a full description, go to Standard Attributes.

Event Attributes

For a full description, go to Event Attributes.

Try-It-Yourself Demos

Create an image map
How to create an image map, with clickable regions. Each of the regions is a hyperlink.

Jump to: Top of Page or HOME or Printer friendly page

W3Schools provides material for training only. We do not warrant the correctness of its contents. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy.

Copyright 1999-2007 by Refsnes Data. All Rights Reserved.

W3Schools was converted to XHTML in December 1999