How do we define an area in an image map with HTML?

HTMLWeb DevelopmentFront End Technology

Use the <area> tag to define area in an image map in HTML.

The HTML <area> tag supports the following additional attributes −

Attribute
Value
Description
Alt
Text
Specifies an alternate text for the area.
coords
if shape = "rect" then coords = "left, top, right, bottom"

if shape = "circ" then coords = "centerx, centery, radius"

if shape = "poly" then coords = "x1, y1, x2, y2,..,xn, yn"
Specifies the coordinates appropriate to the shape attribute to define a region of an image for image maps.
download
filename
Specifies that the target gets downloaded when the hyperlink is clicked by the user.
Href
URL
Specifies the URL of a page or the name of the anchor that the link goes to.
hreflang
language_code
Specifies the language of the target URL.
media
media query
Specifies media/device the target URL is optimized for.
Nohref
true/false
Excludes an area from the image map
rel
alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
Specifies relationship between the current document and the target URL
Shape
rect
rectangle
circ
circle
Specifies the shape of the image map

poly
polygon

Target
_blank
_parent
_self
_top
Where to open the target URL.
_blank − the target URL will open in a new window
_self − the target URL will open in the same frame as it was clicked
_parent − the target URL will open in the parent frameset
_top − the target URL will open in the full body of the window
type
mime_type
Specifies the MIME (Multipurpose Internet Mail Extensions) type of the target URL.

Example

You can try to run the following code to implement <area> tag −

<!DOCTYPE html>
<html>
   <head>
      <title>HTML area Tag</title>
   </head>
   <body>
      <img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>

      <map name = "tutorials">
         <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
            href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />

         <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
            href = "/html/index.htm" target = "_blank" />

         <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
            href = "/php/index.htm" target = "_blank" />
      </map>
   </body>
</html>
raja
Published on 13-Mar-2018 18:48:27
Advertisements