html tutorial - coords Attribute in HTML - html5 - html code - html form

coords attribute in html

Learn html - html tutorial - coords attribute in html - html examples - html programs

  • The coords attribute defines the coordinates of an area in an image-map.
  • This attribute is used together with the shape attribute to define the size, shape, and placement of an area.

Syntax for coords attribute in HTML:

<area coords="value">

Applies To:

Element Attribute
<area> coords

coords Attribute Values:

Shape Value HTML 4 HTML 5 Description
rect x1,y1,x2,y2 yes yes Describes the coordinates of the left, top, right, bottom corner of the rectangle.
circle x,y,radius yes yes Defines the center and the radius of the circle.
poly x1,y1,x2,y2,..,xn,yn yes yes Describes the edges of the polygon.

Sample Coding for coords Attribute in HTML:

Tryit<!DOCTYPE html>
        <title>Wikitechy coords attribute</title>
        <img src="area.png"  alt="usemap" usemap="#wikitechy"/>
        <map name="wikitechy">
        <area shape="rect" coords="19,26,126,62" href="">
        <area shape="rect" coords="19,90,125,135" href="">
        <area shape="circle" coords="71,180,36" href="">

Code Explanation for coords Attribute in HTML:

coords Attribute Code Explanation

  1. <area> tag defines an area by using image map.
  2. coords is an attribute, which specifies the coordinates of an area in an image-map. (Here the rectangle shape is given.)
  3. href is an attribute, which defines the URL of the page

Output for coords Attribute in HTML:

coords Attribute Output

  1. When user click the PHP rectangle that will navigate to the PHP Tutorial page in wikitechy website.
coords Attribute Output
  • The PHP Tutorial page will be shown.

Browser Support for coords Attribute in HTML:

Yes Yes Yes Yes Yes

Related Searches to coords Attribute in html