coords (HTML attribute)

The coords attribute, used within <a></a> elements nested inside an <object></object> element, allows you to create client-side image maps. This provides clickable regions within an image, similar to using <area> elements with a <map></map>. Let's explore the differences and how to use coords.

Image Map Example:

Consider this image:

Method 1: Using <area> elements (Traditional Image Map):

This approach uses <area> elements within a <map></map> to define clickable regions:

<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174053401375600.png"  class="lazy" alt="coords (HTML attribute) " />
<map name="Map">
  <area shape="rect" coords="132,117,270,185" href="https://www.php.cn/link/cf57d08a994170907f4f367c647e075e" alt="Monday's mustache - 'The Hero'">
  <area shape="poly" coords="136,238,137,301,3,306,3,242" href="https://www.php.cn/link/206f6a7ada917912e9389da75d80be3b" alt="Thursday's mustache - 'The Weasel'">
</map>

Method 2: Using <a> elements within <object> (Alternative Approach):

This method embeds the image using <object> and places links (<a>) inside, using coords and shape:

<object data="mustaches.png" type="image/png" width="276" height="375" usemap="#Map2">
  <map name="Map2">
    <ul>
      <li><a href="https://www.php.cn/link/cf57d08a994170907f4f367c647e075e" shape="rect" coords="132,117,270,185">Monday's mustache - 'The Hero'</a></li>
      <li><a href="https://www.php.cn/link/206f6a7ada917912e9389da75d80be3b" shape="poly" coords="136,238,137,301,3,306,3,242">Thursday's mustache - 'The Weasel'</a></li>
    </ul>
  </map>
</object>

The <ul></ul> provides fallback content for browsers lacking proper <object></object> support.

coords Attribute Values:

The coords attribute values depend on the shape attribute:

• rect (Rectangle): x1,y1,x2,y2 (top-left x, top-left y, bottom-right x, bottom-right y coordinates).
• circ (Circle): x,y,r (center x, center y, radius).
• poly (Polygon): x1,y1,x2,y2,x3,y3,... (a series of x, y coordinates defining the polygon's vertices).

Frequently Asked Questions (FAQ):

The provided FAQ section is already comprehensive and accurately describes the coords attribute's usage and limitations. No changes are needed.

The above is the detailed content of coords (HTML attribute). For more information, please follow other related articles on the PHP Chinese website!