每天总结一个html标签——area与map标签

文章目录

- 一、什么是area标签？
- - 示例
- 二、area标签的基本用法
- 三、area标签的基本属性
- - 3.1coords的参考坐标系
- 四、area标签支持html全局事件
- 五、使用area标签的注意事项

一、什么是area标签？

<area> 标签用于定义图像映射中的可点击区域。它通常与 <map> 标签结合使用，以创建图像的多个热点区域。
每个<area> 标签定义了一个可点击的区域，并通过 href属性指定点击后导航的目标。这种标签的使用可以让一张图片的不同部分链接到不同的页面或资源，从而实现更为复杂的交互效果。

下面是一个示例，实现了，点击图片的不同地方，跳转到不同的链接。

示例

动图-点击跳转

二、area标签的基本用法

在网页中使用 <area> 标签可以通过以下简单步骤实现：

准备一张需要添加热点区域的图片。
使用 <map> 标签定义图像映射，并为每个热点区域使用 <area> 标签。
通过<map>的name属性或者id属性和 <img>的usermap属性进行关联。

以下是一个基本的使用示例：

<img src="./example.jpg" usemap="#example" alt="键盘鼠标">
<map name="example" id="example"><area shape="rect" coords="35,90,310,170" href="https://zh.wikipedia.org/wiki/%E7%94%B5%E8%84%91%E9%94%AE%E7%9B%98" target="_blank" alt="键盘"><area shape="rect" coords="330,90,390,170" href="https://wuu.wikipedia.org/wiki/%E9%BC%A0%E6%A0%87" target="_blank" alt="鼠标">
</map>

在这个例子中，example.jpg 图片被映射为一个可点击的区域，用户可以点击不同的区域导航到不同的页面。

三、area标签的基本属性

href: 指定点击区域的链接目标。可以是一个URL，点击后浏览器会导航到该地址。这个属性是实现链接功能的核心。
alt: 提供替代文本描述。<area> 标签的 alt 属性不会直接显示，但会作为辅助信息被屏幕阅读器读取，用于描述热点区域的功能。对于视觉障碍用户，alt 属性提供了重要的上下文信息。
coords: 定义区域的坐标。根据 shape 属性的不同，坐标格式也不同。
- 矩形需要四个值（左上角和右下角的x,y坐标）(x1,y1,x2,y2)
- 圆形需要三个值（圆心的x,y坐标和半径）(x,y,r)
shape: 指定区域的形状，根据形状不同，coords 属性的值也会有所不同。选择合适的形状可以更精确地定义点击区域。
- rect(默认值)：定义矩形区域
- circle：定义圆形区域
- poly：定义多边形区域
- default：整个区域（通常用于图像剩余部分）

3.1coords的参考坐标系

在定义 <area> 标签的 coords 属性时，需要根据图片的坐标系来确定。通常，图片的左上角为坐标系的原点 (0,0)，向右为 x 轴正方向，向下为 y 轴正方向。根据不同的 shape 属性，coords 的值会有所不同：

矩形（rect）: 需要四个值，分别是左上角和右下角的 x,y 坐标。
圆形（circle）: 需要三个值，分别是圆心的 x,y 坐标和半径。
多边形（poly）: 需要一组 x,y 坐标对，定义多边形的每个顶点。

通过理解这些基本概念，您可以更好地使用 <area> 标签来实现复杂的图像映射效果。

四、area标签支持html全局事件

例如：onclick事件

<img src="./example.jpg" usemap="#example" alt="键盘鼠标">
<map name="example">
<area shape="rect" coords="35,90,310,170" onclick="alert('点击到键盘');" alt="键盘">
<area shape="rect" coords="330,90,390,170" onclick="alert('点击到鼠标');" alt="鼠标">
</map>

五、使用area标签的注意事项

应同时向 <map> 添加 id 和 name 属性。area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域
确保 coords 属性的值与 shape 属性匹配。例如，矩形需要四个坐标值，而圆形需要三个。错误的坐标可能导致点击区域不准确。
alt 属性对于无障碍性非常重要，确保为每个 <area> 标签提供有意义的替代文本。这不仅有助于SEO优化，还能提升用户体验。
<area> 标签属于不可渲染元素，无法直接应用大多数 CSS 属性（如 width、height、background-color 等）

如果要实现有丰富视觉效果的图片映射，推荐使用svg代替或者结合JavaScript

<svg width="400" height="250"><image href="./example.jpg" width="400" height="250" /><rect x="35" y="90" width="280" height="80" fill="rgba(255,0,0,0.2)" onclick="location.href='#'" /><rect x="330" y="90" width="50" height="80" fill="rgba(255,0,0,0.2)" onclick="location.href='#'" />
</svg>