coords (HTML attribute)

Share this article

Description

The coords attribute is applied to a link (a element) when the link is contained inside an object element. It’s used to position the link over the top of an image. If you think this sounds like an image map, you’re right. You can use the coords and shape attributes with an a element to create the same effect you’d achieve using a series of area
elements in conjunction with a map. Although they do much the same thing, it’s useful to compare the two methods. First, let’s see the image, which is shown below. A pack of stylish mustaches - the linked mustaches clearly outlined If we used the client-side image map method to achieve this result, the markup would be as follows:
<img src="mustaches.png" alt="Mustaches" width="276"
    height="375" border="0" usemap="#Map"/>
<map name="Map" id="Map">
  <area shape="rect" coords="132,117,270,185" href="the-hero.html"
      alt="Monday's mustache - 'The Hero'"/>
  <area shape="poly" coords="136,238,137,301,3,306,3,242"
      href="the-weasel.html" alt="Thursday's mustache -
      'The Weasel'"/>
</map>
This example code consists of area elements to which alt, coords, and shape attributes are applied. All of these attributes apply to the map element. Now, let’s look at the alternative code, in which the coords and shape attributes are applied to a elements instead:
<object data="mustaches.png" alt="Mustaches" type="image/png"
    width="276" height="375" border="0" usemap="#Map2">
  <map name="Map2" id="Map2">
    <ul>
      <li><a href="the-hero.html" shape="rect"
          coords="132,117,270,185">Monday's mustache -
          'The Hero'</a></li>
      <li><a href="the-weasel.html" shape="poly"
          coords="136,238,137,301,3,306,3,242">Thursday's
          mustache - 'The Weasel'</a></li>
    </ul>
  </map>
</object>
In the second example, the links have been placed inside a ul, and instead of the alt attributes we used for the area in the first example, the text is contained within the link. The idea is that the user will be presented with a list of links in browsers that don’t support the object element properly.

Example

This coords attribute defines the top-left and bottom-right coordinates for a rectangular shape:

<a href="the-hero.html" shape="rect" coords="132,117,270,185">
    Monday's mustache - 'The Hero'</a>

Value

The values that can be entered into the coords attribute are as follows:

  • For rectangular shapes ("rect"), the coords attribute will take four values: x1, y1, x2, and y2. These values define the top-left corner of the rectangle (how many pixels along and down from the image’s top-left corner the boundary will appear), and the bottom-right corner (how many pixels along and down from the image’s top-left corner the boundary will appear).
  • For circular shapes ("circ"), three values are required: x, y, and r. The x and y coordinates tell the browser where the circle’s center point is, while the r value specifies the radius of the circle.
  • Polygonal shapes ("poly"), which are almost always created using a WYSIWYG HTML editor such as Dreamweaver, are defined by a series of x, y coordinates, each of which relates to a point on the polygon’s outline.

Frequently Asked Questions about Coords HTML Attribute

What is the purpose of the coords attribute in HTML?

The coords attribute in HTML is used to specify the coordinates of an area in an image map. An image map is an image with clickable areas. The coords attribute is used with the tag to define the shape and size of the clickable areas. The values of the coords attribute depend on the shape attribute. For a rectangle, the coords attribute should be “x1,y1,x2,y2”; for a circle, “x,y,radius”; and for a polygon, “x1,y1,x2,y2,x3,y3,…”.

How do I use the coords attribute in HTML?

To use the coords attribute in HTML, you first need to create an image map using the tag. Inside the tag, you use the tag to define the clickable areas. The coords attribute is used inside the tag to specify the coordinates of the clickable area. For example, if you want to create a clickable rectangle area, you can use the coords attribute like this: .

Can I use the coords attribute with shapes other than rectangles, circles, and polygons?

No, the coords attribute in HTML is only used with rectangles, circles, and polygons. These are the only shapes that the tag supports. If you want to create a clickable area with a different shape, you would need to use a different method, such as SVG.

How do I determine the correct values for the coords attribute?

The values for the coords attribute depend on the shape of the clickable area and the size of the image. For a rectangle, the values are the x and y coordinates of the top-left corner and the x and y coordinates of the bottom-right corner. For a circle, the values are the x and y coordinates of the center and the radius. For a polygon, the values are the x and y coordinates of each vertex. You can use an image editing tool to determine the correct values.

Can I use the coords attribute without the shape attribute?

No, the coords attribute in HTML must be used with the shape attribute. The shape attribute specifies the shape of the clickable area, and the coords attribute specifies the coordinates of that area. If you use the coords attribute without the shape attribute, the browser will not know what shape to create for the clickable area.

Can I use the coords attribute with the tag?

No, the coords attribute in HTML is not used with the tag. The coords attribute is used with the tag to define the coordinates of a clickable area in an image map. The tag is used to display the image, and the tag is used to create the image map.

Can I use the coords attribute to create multiple clickable areas in an image?

Yes, you can use the coords attribute to create multiple clickable areas in an image. You can use multiple tags inside a tag, each with its own coords attribute, to create multiple clickable areas.

Can I use the coords attribute with animated or interactive images?

The coords attribute in HTML is used with static images to create clickable areas. If you want to create clickable areas in an animated or interactive image, you would need to use a different method, such as JavaScript or SVG.

Can I use the coords attribute to create a clickable area that links to a different website?

Yes, you can use the coords attribute to create a clickable area that links to a different website. You can use the href attribute inside the tag to specify the URL of the website.

Can I use the coords attribute to create a clickable area that opens a new browser window or tab?

Yes, you can use the coords attribute to create a clickable area that opens a new browser window or tab. You can use the target attribute inside the tag to specify where the link should open.

Adam RobertsAdam Roberts
View Author

Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week