<area> - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:area

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. area

Introduction

Item value
Element: area
Element Type:Phrasing
Permitted Parents: The map element
Local Attributes:alt, href, target, rel, media, hreflang, type, shape, coords
Contents:None
Tag Style:Void
New in HTML5? No
Changes in HTML5 The rel, media, and hreflang attributes are new in HTML5. The nohref attribute is now obsolete.

Style Convention 

area {
   display: none;
}

Attributes of the area Element That Relate to the Target

Attribute Description
hrefThe URL that the browser should load when the region is clicked on
alt The alternative content. See the corresponding attribute on the img element.
target The browsing content in which the URL should be displayed.
rel Describes the relationship between the current and target documents.
media The media for which the area is valid.
hreflangThe language of the target document
typeThe MIME type of the target document

Values for the shape and coords Attributes

rect represents a rectangular area. The coords attribute contains four comma-separated integers representing the rectangle:

  • The left edge of the image to the left side of the rectangle
  • The top edge of the image to the top side of the rectangle
  • The left edge of the image to the right side of the rectangle
  • The top edge of the image to the bottom side of the rectangle

circle represents a circular area. The coords attribute contains three comma-separated integers representing the circle:

  • The distance from the left edge of the image to the circle center
  • The distance from the top edge of the image to the circle center
  • The radius of the circle

poly represents a polygon. The coords attribute must contains at least six comma-separated integers, each pair of which represents a point on the polygon.

default value is the default area, which covers the entire image. No coords value is required when using this value for the shape attribute.

Creating an Image Map

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
   </head> 
   <body> 
      <p> 
         <img src="http://java2s.com/resources/g.png" usemap="#mymap" alt="Triathlon Image"> 
      </p> 
      <map name="mymap"> 
         <area href="#" shape="rect" coords="5,5,68,62" alt="test"> 
         <area href="#" shape="rect" coords="70,10,130,62" alt="test"> 
         <area href="#" shape="default" alt="default"> 
      </map>  
   </body><!-- w  w  w.  j a v a  2s.co  m-->
</html>

Related Tutorials