Hosting Solutions
mobile_logo Table of Contents


The <map> element is used to designate <area> hotspots for an <img> element. If you placed a picture on your desk at home and laid a clear sheet of glass the same exact size on top of it, that would be like an image map. You can then draw invisible zones on the clear glass that are interactive.

Code Example

<map name="spotMap"> <area shape="circle" coords="60,33,20" href="#"> <area shape="rect" coords="139,17,172,49" href="#"> <area shape="poly" coords="192,0,191,13,205,7" href="#"> </map> <img src="docsnip.png" alt="pic" width="228" height="63" usemap="#spotMap"> open in code editor


globals - the global attributes common to all elements possible values: see global attribute list name - specify a name for the map possible values: "string"

Official Documentation



aabbraddressareaasidearticleaudiobbasebdobdiblockquotebodybrbuttoncanvascaptioncitecodecolcolgroupdatadatalistdddeldetailsdfndialogdivdldtemembedfieldsetfigcaptionfigurefooterformh1 h2 h3 h4 h5 h6headheaderhrhtmliiframeimginputinskbdkeygenlabellegendlilinkmainmapmarkmetameternavnoscriptobjectoloptgroupoptionoutputpparampreprogressqrb rp rt rtc rubyssampscriptsectionselectsmallsourcespanstrongstylesub supsummarytabletbodytdtemplatetextareatfootththeadtimetitletrtrackuulvarvideowbr