<area> HTML Tag

In this article I explain the <area>tag , which is used for defining an area in an image map.
  • 1845

Introduction

The HTML area tag is used for defining an area in an image map, or we can say that the <area> tag defines an area inside an image-map (an image-map is an image with clickable areas). This tag is used in conjunction with the <map> tag and <img> tag to create an image map. The usemap attribute in the <img> tag is associated with the <map> element's name attribute, and creates a relationship between the image and the map.

Some attributes of <area> tag are

Attributes Description
name Assigns a name to the element
usemap Associates an element with an image map
class Specifies a classname for an element
id Specifies a unique id for an element
style Specifies an inline style for an element
alt Specifies an alternate text for an area
href Specifies the hyperlink target for the area
nohref Specifies that an area has no associated link
shape Specifies the shape of an area
target Specifies where to open the linked page specified in the href attribute
coords Specifies the coordinates of an area
title Specifies extra information about an element
tabindex Specifies the tab order of an element
dir Specifies the text direction for the content in an element
lang Specifies a language code for the content in an element

Lets take an example of <area>tag
 

<html>

<head>

    <title></title>

</head>

<body>

    <p>

        Click on the book to watch it closer:</p>

    <img src="images/WebBooks.jpg" width="350" height="350" alt="Books" usemap="#booksmap" />

    <map name="booksmap">

        <area shape="rect" coords="0,0,82,126" alt="asp_net" href="asp.htm" />

    </map>

</body>

</html>

 

Output

books.jpg

When I click on book that book will open and give a closer look.

books1.jpg

 

Ask Your Question 
 
Got a programming related question? You may want to post your question here
 
© 2018 DotNetHeaven. All rights reserved.