< html‎ | elements
Jump to: navigation, search


This article is In Progress.


Represents either a hyperlink with some text and a corresponding area on an image map, or a dead area on an image map.

Overview Table

DOM Interface HTMLAreaElement


View live exampleThe following example uses the area element inside a parent map element to create an image map of the solar system. Each area element defines and provides a link to an image on the map using the coords and shape attributes to specify its dimensions and shape, respectively; and the title attribute to provide a descriptive pop-up tooltip when pointed to with the mouse. A tooltip is especially useful if the image file is missing or cannot be displayed for whatever reason.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 <meta http-equiv="X-UA-Compatible" content="IE=8"/>
  <title>Image Map Example</title>
  <base href=""/>
<p><img src="/workshop/graphics/solarsys.png" width=504 height=126 border=0
    title="Solar System" usemap="#SystemMap"/></p>
  <map name="SystemMap">
	  <area shape="rect" coords="0,0,82,126"
	    href="/workshop/graphics/sun.png" title="Sun"/>
	  <area shape="circle" coords="90,58,3"
	    href="/workshop/graphics/merglobe.png" title="Mercury"/>
	  <area shape="circle" coords="124,58,8"
	    href="/workshop/graphics/venglobe.png" title="Venus"/>
	  <area shape="circle" coords="162,58,10"
	    href="/workshop/graphics/earglobe.png" title="Earth"/>
	  <area shape="circle" coords="203,58,8"
	    href="/workshop/graphics/marglobe.png" title="Mars"/>
	  <area shape="poly" coords="221,34,238,37,257,32,278,44,284,60,
	    href="/workshop/graphics/jupglobe.png" title="Jupiter"/>
	  <area shape="poly" coords="288,19,316,39,330,37,348,47,351,66,
	    href="/workshop/graphics/satglobe.png" title="Saturn"/>
	  <area shape="poly" coords="405,39,408,50,411,57,410,71,404,78,
	    href="/workshop/graphics/uraglobe.png" title="Uranus"/>
	  <area shape="poly" coords="445,38,434,49,431,53,427,62,430,72,
	    href="/workshop/graphics/nepglobe.png" title="Neptune"/>
	  <area shape="circle" coords="479,66,3"
	    href="/workshop/graphics/pluglobe.png" title="Pluto"/>



Any number of area elements can be contained within the same map element. The format of the coords value depends on the value of the shape attribute. Windows Internet Explorer 8 and later. In IE8 Standards mode, the title attribute is preferred over the alt attribute when specified as a pop-up tooltip for an img or a map element. In addition, the value of the href attribute depends on the current document compatibility mode. This element is not rendered. This element does not require a closing tag.

Standards information

HTML information




Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?


Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?


This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]