area

< html‎ | elements
Jump to: navigation, search

area

This article is In Progress.



Summary

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


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
?
Yes
?
Yes
?
Yes
?
Yes
?
Yes

Mobile

FeaturesAndroidFirefox MobileIE MobileOpera MiniOpera MobileSafari Mobile
Basic support
?
Unknown
?
Unknown
?
Unknown
?
Unknown
?
Unknown
?
Unknown

Examples

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.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="X-UA-Compatible" content="IE=8"/>
  <title>Image Map Example</title>
  <base href="http://samples.msdn.microsoft.com"/>
</head>
<body>
<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,
	    281,75,288,91,267,87,253,89,237,81,229,64,228,54"
	    href="/workshop/graphics/jupglobe.png" title="Jupiter"/>
	  <area shape="poly" coords="288,19,316,39,330,37,348,47,351,66,
	    349,74,367,105,337,85,324,85,307,77,303,60,307,50"
	    href="/workshop/graphics/satglobe.png" title="Saturn"/>
	  <area shape="poly" coords="405,39,408,50,411,57,410,71,404,78,
	    393,80,383,86,381,75,376,69,376,56,380,48,393,44"
	    href="/workshop/graphics/uraglobe.png" title="Uranus"/>
	  <area shape="poly" coords="445,38,434,49,431,53,427,62,430,72,
	    435,77,445,92,456,77,463,72,463,62,462,53,455,47"
	    href="/workshop/graphics/nepglobe.png" title="Neptune"/>
	  <area shape="circle" coords="479,66,3"
	    href="/workshop/graphics/pluglobe.png" title="Pluto"/>
  </map>
</body>
</html>

Notes

Remarks

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

{

Attribution

This article contains content originally from external sources.

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