area

area

The HTML <area> element is usually used within a banner or image mapping scenario where there will be clickable items on the banner or image. It must have a parent <map> element that is related to an image on the page by its name. Each area element in a map defines a hotspot that will enable mouse interactivity. In the image code demo below you will notice a rectangle and a circular hotspot are drawn and made clickable on top of the picture. The "coords" attribute and values are the size and location of your hotspot items. This is a Void Element so it does not get a closing tag like most elements.

HTML CODE EXAMPLE

<map name="spotMap">
  <area shape="rect" coords="10,10,124,51" href="index.html"> 
  <area shape="circle" coords="102,219,46" href="contact.html">
</map>
<img src="myImage.jpg" alt="pic" width="283" height="283" usemap="#spotMap">

Roll your mouse over my image below to see my hotspots in place in it. The idea is to make parts of the image banner clickable in certain spots on the otherwise static image.

Live Browser

Attributes for this element:

shape - specify the shape that your hotspot link will be
Possible Values: "default","rect","circle","poly"
default - hotspot will be a rectangle the entire siz of the image map
rect - rectangular hotspot you can define the size and placement of
circle - circular hotspot that you can define the size and placement of
poly - polygonal hotspot for creating many sided custom shapes

coords - coordinates for your shape
Possible Values: "numbers separated by commas"

alt - fallback text for image
Possible Values: "you define text"

href - where to navigate the user
Possible Values: "relative or full URL string"

target - determines how the window is opened for the destination
Possible Values: "_blank", "_self", "_parent", "_top"

rel - specify relationship between the linking file and the destination file
Possible Values: "space separated token list"

hreflang - language of the destination file
Possible Values: "valid language code"

type - mime type of the destination file
Possible Values: "valid mime type"

global attributes - global core attributes
See: list of global attributes


Events handlers for this element:

global event handlers - global event handler attributes
See: list of global event handlers

Tweet