HTML coords 属性详解

2026-02-12 12:51:51 0条评论 4次阅读 0人点赞

在我们探索 HTML 图像映射的奥秘时，让我们深入了解一个至关重要属性——HTML coords 属性。

这个属性主要用于指定图像映射内某个区域的坐标。当我们将其与 shape 属性配合使用时，它就拥有了定义区域大小、形状和位置的能力。值得注意的是，坐标原点 (0, 0) 通常位于图像的左上角。

根据我们想要绘制的形状不同，coords 属性的值也有不同的含义：

x1, y1, x2, y2：这组坐标用于指定矩形（Rectangle）的左上角 (x1, y1) 和右下角 (x2, y2)。
x, y, radius：这组参数用于指定圆形（Circle）的圆心坐标 (x, y) 以及圆的半径（radius）。
x1, y1, x2, y2, .., xn, yn：这组坐标用于指定多边形（Polygon）的各个顶点。如果第一个坐标对和最后一个坐标对不相同，浏览器会自动将它们连接起来以闭合多边形。

在这个例子中，我们将一起看看如何使用 INLINECODE8c32e2be 和 INLINECODE52c089b9 元素在图像上创建可点击的区域。每个区域都链接到不同的 URL，并通过形状和坐标进行精确定义。





    
        HTML coords Attribute
    



    技术探索平台
    HTML Coords 属性演示

为了更直观地理解，请看下面的演示动画：

HTML coords 属性示例输出效果

HTML coords 属性得到了主流浏览器的广泛支持，具体列表如下：

豆丁博客