area
area
This page has been flagged with the following issues:
High-level issues:
Summary
The area element (<area>) 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 |
|---|
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.
<!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
- Document Object Model (DOM) Level 2 HTML Specification, Section 1.6.5
- HTML 4.01 Specification, Section 13.6.1
HTML information
{
Compatibility
Desktop
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? |
Mobile
| 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]
This tool helps to make and review comments inline.
How to Use
insert instructions, with images, here