admin 管理员组

文章数量: 887044


2024年1月24日发(作者:python怎么读取表格)

css map area标签

在 CSS 中,`map`标签与`area`标签常搭配使用,用于定义客户端图像映射,即带有可点击区域的图像。其中,`map`标签的作用是与`img`标签绑定,并为客户端图像的某些区域赋予特殊含义,点击该区域可以跳转到新的文档。`area`标签则用于定义图像映射中的可点击区域。

使用时,需要给`map`标签添加`ID`和`name`属性,让`img`标签中的`usemap`属性引用`map`标签中的`id`或者`name`属性(由于浏览器的不同,`usemap`属性接收二者之一的值,所以通常`name`和`id`属性二者都写,值相同),并配合`area`标签进行使用。例如:

```html

alt="Circle" />

href="#2" alt="Rectangle" />

href="#3" alt="Poly" />

```

在上述示例中,首先插入一张图片,并与`map`连接好,然后用`area`设置区域其中的属性,即可得到一个带有热点区域的图片。其中,`shape`是形状,`coords`是坐标。不同形状的属性值和坐标的含义如下:

- 圆形(circle):`coords`的前两位数是圆心的位置,后一位是半径。

- 矩形(rectangle):`coords`的前两位数是一个角的位置,后两位是对角的位置。

- 多边形(poly):`coords`的值是每一对数就是一个角的位置。

`area`标签实际上可以脱离`map`正常使用,就像普通的``标签一样,但它不支持嵌套。`Firefox`浏览器不支持(`Firefox`的``元素默认`display:none`,且无法重置),无法使用键盘`Tab`索引访问。


本文标签: 标签 区域 属性 使用 图像