An image map, with clickable areas: The
Note: The |
An image map, with clickable areas:
Example:
HTML
<img src="https://horje.com/avatar.png" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
Attribute | Value | Description |
---|---|---|
alt | text | Specifies an alternate text for the area. Required if the href attribute is present |
coords | coordinates | Specifies the coordinates of the area |
download | filename | Specifies that the target will be downloaded when a user clicks on the hyperlink |
href | URL | Specifies the hyperlink target for the area |
hreflang | language_code | Specifies the language of the target URL |
media | media query | Specifies what media/device the target URL is optimized for |
referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url |
Specifies which referrer information to send with the link |
rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
Specifies the relationship between the current document and the target URL |
shape | default rect circle poly |
Specifies the shape of the area |
target | _blank _parent _self _top framename |
Specifies where to open the target URL |
type | media_type | Specifies the media type of the target URL |
Example:
HTML
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com/learn/629/what-is-html-applet-tag">
<area shape="circle" coords="90,58,3" alt="Mercury" href="https://horje.com/learn/628/what-is-html-address-tag">
<area shape="circle" coords="124,58,8" alt="Venus" href="https://horje.com/learn/627/what-is-html-acronym-tag">
</map>
Example:
HTML
<style>
area {
display: none;
}
</style>
Use the alt attribute to specify an alternate text for each area in the image map.
The alt
attribute specifies an alternate text for an area, if the image cannot be displayed.
The alt
attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
The alt
attribute is required if the href
attribute is present.
<area alt="text">
Value | Description |
---|---|
text | Specifies the alternate text for the area, if the image cannot be displayed |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area alt attribute</h1>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com/learn/630/what-is-html-area-tag">
<area shape="circle" coords="90,58,3" alt="Mercury" href="https://horje.com/learn/630/what-is-html-area-tag">
<area shape="circle" coords="124,58,8" alt="Venus" href="https://horje.com/learn/630/what-is-html-area-tag">
</map>
</body>
</html>
Use the coords attribute to specify the coordinates of each area in the image map.
The coords
attribute specifies the coordinates of an area in an image map.
The coords
attribute is used together with the shape
attribute to specify the size, shape, and placement of an area.
Tip: The coordinates of the top-left corner of an area are 0,0.
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area coords attribute</h1>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map id="planetmap" name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com">
<area shape="circle" coords="90,58,3" alt="Mercury" href="https://horje.com/avatar.png">
<area shape="circle" coords="124,58,8" alt="Venus" href="https://horje.com">
</map>
</body>
</html>
Specifies the coordinates of the top-left and bottom-right corner of the rectangle (shape="rect").
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area coords attribute</h1>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map id="planetmap" name="planetmap">
<area shape="rect" coords="x1,y1,x2,y2" alt="Sun" href="https://horje.com">
</map>
</body>
</html>
Specifies the coordinates of the circle center and the radius (shape="circle").
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area coords attribute</h1>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map id="planetmap" name="planetmap">
<area shape="rect" coords="x,y,radius" alt="Sun" href="https://horje.com">
</map>
</body>
</html>
Use the download attribute to specify that the target will be downloaded when a user clicks on the hyperlink:
The download
attribute specifies that the target (the file specified in the href
attribute) will be downloaded when a user clicks on the hyperlink.
The optional value of the download
attribute will be the new name of the file after it is downloaded. There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.).
If the value is omitted, the original filename is used.
The numbers in the table specify the first browser version that fully supports the attribute.
* Chrome 65+ and Firefox only support same-origin download links.
<area download="filename">
Value | Description |
---|---|
filename | Optional. Specifies the new filename for the downloaded file |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area download attribute</h1>
<p>Click on the sun or on one of the planets to download its content.</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com/avatar.png" download>
<area shape="circle" coords="90,58,3" alt="Mercury" href="https://horje.com/avatar.png" download>
<area shape="circle" coords="124,58,8" alt="Venus" href="https://horje.com/avatar.png" download>
</map>
<p><b>Note:</b> The download attribute is not supported in IE, Safari or Opera version 12 (and earlier).</p>
</body>
</html>
Specify a value for the download attribute, which will be the new filename of the downloaded file (sun.htm instead of information_about_the_sun.htm and so on):
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area download attribute</h1>
<p>Click on the sun or on one of the planets to download its content.</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" download="sun">
<area shape="circle" coords="90,58,3" alt="Mercury" href="https://horje.com/avatar.png" download="mercury">
<area shape="circle" coords="124,58,8" alt="Venus" href="https://horje.com/avatar.png" download="venus">
</map>
<p>Notice that the filename of the downloaded file will be saved as "sun.htm" instead of "information_about_the_sun.htm" for the sun area, "mercury.gif" instead of "merglobe.gif" for the mercury area and "venus.txt" instead of "information_about_the_planet_venus.txt" for the venus area.</p>
<p><b>Note:</b> The download attribute is not supported in IE, Safari or Opera version 12 (and earlier).</p>
</body>
</html>
Use the href attribute to specify the link target for each area in the image map:
The href
attribute specifies the hyperlink target for the area.
If the href
attribute is not present, the <area>
tag is not a hyperlink.
<area href="URL">
Value | Description |
---|---|
URL | Specifies the hyperlink target for the area.
Possible values:
|
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area href attribute</h1>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map id="planetmap" name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com/avatar.png">
<area shape="circle" coords="90,58,3" alt="Mercury" href="https://horje.com/avatar.png">
<area shape="circle" coords="124,58,8" alt="Venus" href="https://horje.com/avatar.png">
</map>
</body>
</html>
Use the hreflang attribute to specify the language of the target URL for each area in the image map:
The hreflang
attribute specifies the language of the target URL in the area.
This attribute is only used if the href
attribute is set.
Note: This attribute is purely advisory.
<area hreflang="language_code">
Value | Description |
---|---|
language_code | A two-letter language code that specifies the language of the linked document. To view all available language codes, go to our Language code reference. |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area hreflang attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" hreflang="en">
</map>
</body>
</html>
Use the media attribute to specify what media/device the target URL is optimized for:
The media
attribute specifies what media/device the target URL is optimized for.
This attribute is used to specify that the URL is designed for special devices (like iPhone), speech or print media.
This attribute can accept several values.
Only used if the href
attribute is present.
Note: This attribute is purely advisory.
<area media="value">
Value | Description |
---|---|
and | Specifies an AND operator |
not | Specifies a NOT operator |
, | Specifies an OR operator |
Value | Description |
---|---|
all | Default. Suitable for all devices |
aural | Speech synthesizers |
braille | Braille feedback devices |
handheld | Handheld devices (small screen, limited bandwidth) |
projection | Projectors |
Print preview mode/printed pages | |
screen | Computer screens |
tty | Teletypes and similar media using a fixed-pitch character grid |
tv | Television type devices (low resolution, limited scroll ability) |
Value | Description |
---|---|
width | Specifies the width of the targeted display area. "min-" and "max-" prefixes can be used. Example: media="screen and (min-width:500px)" |
height | Specifies the height of the targeted display area. "min-" and "max-" prefixes can be used. Example: media="screen and (max-height:700px)" |
device-width | Specifies the width of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="screen and (device-width:500px)" |
device-height | Specifies the height of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="screen and (device-height:500px)" |
orientation | Specifies the orientation of the target display/paper. Possible values: "portrait" or "landscape" Example: media="all and (orientation: landscape)" |
aspect-ratio | Specifies the width/height ratio of the targeted display area. "min-" and "max-" prefixes can be used. Example: media="screen and (aspect-ratio:16/9)" |
device-aspect-ratio | Specifies the device-width/device-height ratio of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="screen and (aspect-ratio:16/9)" |
color | Specifies the bits per color of target display. "min-" and "max-" prefixes can be used. Example: media="screen and (color:3)" |
color-index | Specifies the number of colors the target display can handle. "min-" and "max-" prefixes can be used. Example: media="screen and (min-color-index:256)" |
monochrome | Specifies the bits per pixel in a monochrome frame buffer. "min-" and "max-" prefixes can be used. Example: media="screen and (monochrome:2)" |
resolution | Specifies the pixel density (dpi or dpcm) of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="print and (resolution:300dpi)" |
scan | Specifies scanning method of a tv display. Possible values are "progressive" and "interlace". Example: media="tv and (scan:interlace)" |
grid | Specifies if the output device is grid or bitmap. Possible values are "1" for grid, and "0" otherwise. Example: media="handheld and (grid:1)" |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area media attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" media="screen and (min-color-index:256)">
</map>
</body>
</html>
width | Specifies the width of the targeted display area. "min-" and "max-" prefixes can be used. Example: media="screen and (min-width:500px)" |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area media width attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com/avatar.png" media="screen and (min-width:500px)">
</map>
</body>
</html>
height | Specifies the height of the targeted display area. "min-" and "max-" prefixes can be used. Example: media="screen and (max-height:700px)" |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area media height attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" media="screen and (max-height:700px)">
</map>
</body>
</html>
device-width | Specifies the width of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="screen and (device-width:500px)" |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area media device-width attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" media="screen and (device-width:500px)">
</map>
</body>
</html>
device-height | Specifies the height of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="screen and (device-height:500px)" |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area media device-height attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" media="screen and (device-height:500px)">
</map>
</body>
</html>
orientation | Specifies the orientation of the target display/paper. Possible values: "portrait" or "landscape" Example: media="all and (orientation: landscape)" |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area media orientation attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" media="all and (orientation: landscape)">
</map>
</body>
</html>
aspect-ratio | Specifies the width/height ratio of the targeted display area. "min-" and "max-" prefixes can be used. Example: media="screen and (aspect-ratio:16/9)" |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area media aspect-ratio attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" media="screen and (aspect-ratio:16/9)">
</map>
</body>
</html>
device-aspect-ratio | Specifies the device-width/device-height ratio of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="screen and (aspect-ratio:16/9)" |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area media device-aspect-ratio attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" media="screen and (aspect-ratio:16/9)">
</map>
</body>
</html>
color | Specifies the bits per color of target display. "min-" and "max-" prefixes can be used. Example: media="screen and (color:3)" |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area media color attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" media="screen and (color:3)">
</map>
</body>
</html>
color-index | Specifies the number of colors the target display can handle. "min-" and "max-" prefixes can be used. Example: media="screen and (min-color-index:256)" |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area media color-index attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" media="screen and (min-color-index:256)">
</map>
</body>
</html>
monochrome | Specifies the bits per pixel in a monochrome frame buffer. "min-" and "max-" prefixes can be used. Example: media="screen and (monochrome:2)" |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area media monochrome attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" media="screen and (monochrome:2)">
</map>
</body>
</html>
resolution | Specifies the pixel density (dpi or dpcm) of the target display/paper. "min-" and "max-" prefixes can be used. Example: media="print and (resolution:300dpi)" |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area media resolution attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" media="print and (resolution:300dpi)">
</map>
</body>
</html>
scan | Specifies scanning method of a tv display. Possible values are "progressive" and "interlace". Example: media="tv and (scan:interlace)" |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area media scan attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" media="tv and (scan:interlace)">
</map>
</body>
</html>
grid | Specifies if the output device is grid or bitmap. Possible values are "1" for grid, and "0" otherwise. Example: media="handheld and (grid:1)" |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area media grid attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" media="handheld and (grid:1)">
</map>
</body>
</html>
Set the referrerpolicy attribute for the area hyperlinks.
The referrerpolicy
attribute specifies which referrer information to send when the user clicks on the hyperlink.
The numbers in the table specify the first browser version that fully supports the attribute.
<area referrerpolicy="no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|same-origin|strict-origin-when-cross-origin|unsafe-url">
Value | Description |
---|---|
no-referrer | No referrer information is sent |
no-referrer-when-downgrade | Default. Sends the origin, path, and query string if the protocol security level stays the same or is higher (HTTP to HTTP, HTTPS to HTTPS, HTTP to HTTPS is ok). Sends nothing to less secure level (HTTPS to HTTP is not ok) |
origin | Sends the origin (scheme, host, and port) of the document |
origin-when-cross-origin | Sends the origin of the document for cross-origin request. Sends the origin, path, and query string for same-origin request |
same-origin | Sends a referrer for same-origin request. Sends no referrer for cross-origin request |
strict-origin-when-cross-origin | Sends the origin if the protocol security level stays the same or is higher (HTTP to HTTP, HTTPS to HTTPS, and HTTP to HTTPS is ok). Sends nothing to less secure level (HTTPS to HTTP) |
unsafe-url | Sends the origin, path, and query string (regardless of security). Use this value carefully! |
Example:
HTML
<img src="https://horje.com/uploads/demo/2024-02-19-15-51-41-area11.png"
alt="" width="300" height="119"
class="aligncenter size-medium wp-image-910965"
usemap="#shapemap" />
<map name="shapemap">
<!-- area tag contained image. -->
<area shape="poly"
coords="59,31,28,83,91,83"
href="https://horje.com/uploads/demo/2024-02-19-15-52-16-area2.png"
alt="Triangle" referrerpolicy="same-origin">
</map>
no-referrer | No referrer information is sent |
Example:
HTML
<img src="https://horje.com/uploads/demo/2024-02-19-15-51-41-area11.png"
alt="" width="300" height="119"
class="aligncenter size-medium wp-image-910965"
usemap="#shapemap" />
<map name="shapemap">
<!-- area tag contained image. -->
<area shape="poly"
coords="59,31,28,83,91,83"
href="https://horje.com/uploads/demo/2024-02-19-15-52-16-area2.png"
alt="Triangle" referrerpolicy="no-referrer">
</map>
no-referrer-when-downgrade | Default. Sends the origin, path, and query string if the protocol security level stays the same or is higher (HTTP to HTTP, HTTPS to HTTPS, HTTP to HTTPS is ok). Sends nothing to less secure level (HTTPS to HTTP is not ok) |
Example:
HTML
<img src="https://horje.com/uploads/demo/2024-02-19-15-51-41-area11.png"
alt="" width="300" height="119"
class="aligncenter size-medium wp-image-910965"
usemap="#shapemap" />
<map name="shapemap">
<!-- area tag contained image. -->
<area shape="poly"
coords="59,31,28,83,91,83"
href="https://horje.com/uploads/demo/2024-02-19-15-52-16-area2.png"
alt="Triangle" referrerpolicy="no-referrer-when-downgrade">
</map>
origin | Sends the origin (scheme, host, and port) of the document |
Example:
HTML
<img src="https://horje.com/uploads/demo/2024-02-19-15-51-41-area11.png"
alt="" width="300" height="119"
class="aligncenter size-medium wp-image-910965"
usemap="#shapemap" />
<map name="shapemap">
<!-- area tag contained image. -->
<area shape="poly"
coords="59,31,28,83,91,83"
href="https://horje.com/uploads/demo/2024-02-19-15-52-16-area2.png"
alt="Triangle" referrerpolicy="origin">
</map>
origin-when-cross-origin | Sends the origin of the document for cross-origin request. Sends the origin, path, and query string for same-origin request |
Example:
HTML
<img src="https://horje.com/uploads/demo/2024-02-19-15-51-41-area11.png"
alt="" width="300" height="119"
class="aligncenter size-medium wp-image-910965"
usemap="#shapemap" />
<map name="shapemap">
<!-- area tag contained image. -->
<area shape="poly"
coords="59,31,28,83,91,83"
href="https://horje.com/uploads/demo/2024-02-19-15-52-16-area2.png"
alt="Triangle" referrerpolicy="origin-when-cross-origin">
</map>
same-origin | Sends a referrer for same-origin request. Sends no referrer for cross-origin request |
Example:
HTML
<img src="https://horje.com/uploads/demo/2024-02-19-15-51-41-area11.png"
alt="" width="300" height="119"
class="aligncenter size-medium wp-image-910965"
usemap="#shapemap" />
<map name="shapemap">
<!-- area tag contained image. -->
<area shape="poly"
coords="59,31,28,83,91,83"
href="https://horje.com/uploads/demo/2024-02-19-15-52-16-area2.png"
alt="Triangle" referrerpolicy="same-origin">
</map>
strict-origin-when-cross-origin | Sends the origin if the protocol security level stays the same or is higher (HTTP to HTTP, HTTPS to HTTPS, and HTTP to HTTPS is ok). Sends nothing to less secure level (HTTPS to HTTP) |
Example:
HTML
<img src="https://horje.com/uploads/demo/2024-02-19-15-51-41-area11.png"
alt="" width="300" height="119"
class="aligncenter size-medium wp-image-910965"
usemap="#shapemap" />
<map name="shapemap">
<!-- area tag contained image. -->
<area shape="poly"
coords="59,31,28,83,91,83"
href="https://horje.com/uploads/demo/2024-02-19-15-52-16-area2.png"
alt="Triangle" referrerpolicy="strict-origin-when-cross-origin">
</map>
unsafe-url | Sends the origin, path, and query string (regardless of security). Use this value carefully! |
Example:
HTML
<img src="https://horje.com/uploads/demo/2024-02-19-15-51-41-area11.png"
alt="" width="300" height="119"
class="aligncenter size-medium wp-image-910965"
usemap="#shapemap" />
<map name="shapemap">
<!-- area tag contained image. -->
<area shape="poly"
coords="59,31,28,83,91,83"
href="https://horje.com/uploads/demo/2024-02-19-15-52-16-area2.png"
alt="Triangle" referrerpolicy="unsafe-url">
</map>
Use the rel attribute to specify the relationship between the current document and the linked document:
The rel
attribute specifies the relationship between the current document and the linked document.
Only used if the href
attribute is present.
<area rel="value">
Value | Description |
---|---|
alternate | Links to an alternate version of the document (i.e. print page, translated or mirror) |
author | Links to the author of the document |
bookmark | Permanent URL used for bookmarking |
help | Links to a help document |
license | Links to copyright information for the document |
next | The next document in a selection |
nofollow | Links to an unendorsed document, like a paid link. ("nofollow" is used by Google, to specify that the Google search spider should not follow that link) |
noreferrer | Specifies that the browser should not send a HTTP referer header if the user follows the hyperlink |
prefetch | Specifies that the target document should be cached |
prev | The previous document in a selection |
search | Links to a search tool for the document |
tag | A tag (keyword) for the current document |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area rel attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" rel="alternate">
</map>
</body>
</html>
alternate | Links to an alternate version of the document (i.e. print page, translated or mirror) |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area rel attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" rel="alternate">
</map>
</body>
</html>
author | Links to the author of the document |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area rel attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" rel="author">
</map>
</body>
</html>
bookmark | Permanent URL used for bookmarking |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area rel attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" rel="bookmark">
</map>
</body>
</html>
help | Links to a help document |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area rel attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" rel="help">
</map>
</body>
</html>
license | Links to copyright information for the document |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area rel attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" rel="license">
</map>
</body>
</html>
next | The next document in a selection |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area rel attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" rel="next">
</map>
</body>
</html>
nofollow | Links to an unendorsed document, like a paid link. ("nofollow" is used by Google, to specify that the Google search spider should not follow that link) |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area rel attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" rel="nofollow">
</map>
</body>
</html>
noreferrer | Specifies that the browser should not send a HTTP referer header if the user follows the hyperlink |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area rel attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" rel="noreferrer">
</map>
</body>
</html>
prefetch | Specifies that the target document should be cached |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area rel attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" rel="prefetch">
</map>
</body>
</html>
prev | The previous document in a selection |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area rel attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" rel="prev">
</map>
</body>
</html>
search | Links to a search tool for the document |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area rel attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" rel="search">
</map>
</body>
</html>
tag | A tag (keyword) for the current document |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area rel attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" rel="tag">
</map>
</body>
</html>
Use the shape attribute to specify the shape of each area in the image map.
The shape
attribute specifies the shape of an area.
The shape
attribute is used together with the coords
attribute to specify the size, shape, and placement of an area.
<area shape="default|rect|circle|poly">
Value | Description |
---|---|
default | Specifies the entire region |
rect | Defines a rectangular region |
circle | Defines a circular region |
poly | Defines a polygonal region |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area shape attribute</h1>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map id="planetmap" name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com">
<area shape="circle" coords="90,58,3" alt="Mercury" href="https://horje.com/">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html>
default | Specifies the entire region |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area shape attribute</h1>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map id="planetmap" name="planetmap">
<area shape="default" coords="0,0,82,126" alt="Sun" href="https://horje.com">
<area shape="circle" coords="90,58,3" alt="Mercury" href="https://horje.com/">
<area shape="circle" coords="124,58,8" alt="Venus" href="https://horje.com">
</map>
</body>
</html>
rect | Defines a rectangular region |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area shape attribute</h1>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map id="planetmap" name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com">
<area shape="circle" coords="90,58,3" alt="Mercury" href="https://horje.com/">
<area shape="circle" coords="124,58,8" alt="Venus" href="https://horje.com">
</map>
</body>
</html>
circle | Defines a circular region |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area shape attribute</h1>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map id="planetmap" name="planetmap">
<area shape="circle" coords="0,0,82,126" alt="Sun" href="https://horje.com">
<area shape="circle" coords="90,58,3" alt="Mercury" href="https://horje.com/">
<area shape="circle" coords="124,58,8" alt="Venus" href="https://horje.com">
</map>
</body>
</html>
poly | Defines a polygonal region |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area shape attribute</h1>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map id="planetmap" name="planetmap">
<area shape="poly" coords="0,0,82,126" alt="Sun" href="https://horje.com">
<area shape="circle" coords="90,58,3" alt="Mercury" href="https://horje.com/">
<area shape="circle" coords="124,58,8" alt="Venus" href="https://horje.com">
</map>
</body>
</html>
Use the target attribute to specify where to open the linked document in the image map.
The target
attribute specifies where to open the linked document.
Only used if the href
attribute is present.
<area target="_blank|_self|_parent|_top|framename">
Value | Description |
---|---|
_blank | Opens the linked document in a new window or tab |
_self | Opens the linked document in the same frame as it was clicked |
_parent | Opens the linked document in the parent frame |
_top | Opens the linked document in the full body of the window |
framename | Opens the linked document in a named iframe |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area attribute</h1>
<p>Click on the picture or on one of the planets to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" target="_blank">
<area shape="circle" coords="90,58,3" alt="Mercury" href="https://horje.com">
<area shape="circle" coords="124,58,8" alt="Venus" href="https://horje.com">
</map>
</body>
</html>
_blank | Opens the linked document in a new window or tab |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area attribute</h1>
<p>Click on the picture or on one of the planets to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" target="_blank">
<area shape="circle" coords="90,58,3" alt="Mercury" href="https://horje.com">
<area shape="circle" coords="124,58,8" alt="Venus" href="https://horje.com">
</map>
</body>
</html>
_self | Opens the linked document in the same frame as it was clicked |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area attribute</h1>
<p>Click on the picture or on one of the planets to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" target="_self">
<area shape="circle" coords="90,58,3" alt="Mercury" href="https://horje.com">
<area shape="circle" coords="124,58,8" alt="Venus" href="https://horje.com">
</map>
</body>
</html>
_parent | Opens the linked document in the parent frame |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area attribute</h1>
<p>Click on the picture or on one of the planets to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" target="_parent">
<area shape="circle" coords="90,58,3" alt="Mercury" href="https://horje.com">
<area shape="circle" coords="124,58,8" alt="Venus" href="https://horje.com">
</map>
</body>
</html>
_top | Opens the linked document in the full body of the window |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area attribute</h1>
<p>Click on the picture or on one of the planets to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" target="_top">
<area shape="circle" coords="90,58,3" alt="Mercury" href="https://horje.com">
<area shape="circle" coords="124,58,8" alt="Venus" href="https://horje.com">
</map>
</body>
</html>
framename | Opens the linked document in a named iframe |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area attribute</h1>
<p>Click on the picture or on one of the planets to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com" target="framename">
<area shape="circle" coords="90,58,3" alt="Mercury" href="https://horje.com">
<area shape="circle" coords="124,58,8" alt="Venus" href="https://horje.com">
</map>
</body>
</html>
Use the type attribute to specify the MIME type of the target URL:
The type
attribute specifies the Internet media type (formerly known as MIME type) of the target URL.
This attribute is only used if the href
attribute is set.
Note: This attribute is purely advisory.
<area type="media_type">
Value | Description |
---|---|
media_type | The Internet media type of the linked document. Look at IANA Media Types for a complete list of standard media types. |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area type attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com/avatar.png" type="image/gif">
</map>
</body>
</html>
media_type | The Internet media type of the linked document. Look at IANA Media Types for a complete list of standard media types. |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area type attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="https://horje.com/avatar.png" type="image/gif">
</map>
</body>
</html>
Read Full:: | HTML Tag |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded: | 7 months ago |
Uploaded by: | Admin |
Views: | 1 |
Ref on: | View |