HTML area Tag

  • HTML <area> tag define or create a area in image map.

  • <area> tag is always surrounding a <map> tag.

Example

<!DOCTYPE html>
<html>
<head>
  <title>HTML area tag</title>
</head>
<body>
  <img src="../../images/img_nat.png" width="207" height="139" alt="Natural" usemap ="#define">
  <map name="define" >
    <area shape ="rect" coords ="0,0,115,90" href ="http://en.wikipedia.org/wiki/Sky" alt="croud"/>
    <area shape ="poly" coords ="10,10,162,82,175,100,181,102,175,148,122,146" href ="http://en.wikipedia.org/wiki/Water" alt="water"/>
  </map>
</body>
</html>

Run it...   »

<area> Tag Attributes

<area> tag supported following specific attributes.

Attributes Value Description
alt text Specifies the text to identify the render the image.
href url Specifies URL link to information about render image.
target _blank
_parent
_self
_top 		Loads the linked document in new window.
Loads the linked document in the parent frame.
Loads the linked document in the same window.
Loads the linked document in the top up on same window.
shape rect
circle
poly 		define sharp of specify render image.
coords coords_value Specifies the coordinates of an image map.

Global Attributes

<area> tag also support global attributes.

Attributes Value Description
id unique_name Declared unique id for an element.
class class_name Declared one or more classnames for an element.
style styles CSS inline styles specify an element.
title title Specify extra details of element contain, this will display as a "tooltip" for an elements.

Event Attributes

<area> tag support following Event attributes.

Attributes Value Description
onfocus script element gets focus on object when script tobe run.
onblur script element lose the focus on object when scrip tobe run.
onclick script clicked on object when script tobe run.
ondblclick script double click on object when script tobe run.
onkeydown script key is pressed when script tobe run.
onkeypress script key is pressed over element then released when script tobe run.
onkeyup script key is released over element when script tobe run.
onmousedown script mouse button was pressed over an element when script tobe run.
onmouseout script mouse pointer release over an element when script tobe run.
onmousemove script run mouse pointer moved when script tobe run.
onmouseover script run mouse pointer move over when script tobe run.
onmouseup script mouse button is released when script tobe run.

Browser Compatibility

  • Google Chrome
    Yes
  • Mozilla Firefox
    Yes
  • Microsoft Edge
    Yes
  • Opera
    Yes
  • Safari
    Yes