HTML and CSS 学习笔记-第10章图像链接和图像映射_html图象映射为什么要加usemap-优快云博客

本文链接：https://blog.youkuaiyun.com/congratution/article/details/3187576

本文介绍如何通过确定图像内可点击区域的像素坐标来创建图像映射，并详细解释了使用<map>和<area>标签的方法，以及各种属性的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.找到图像映射的坐标

要创建图像映射，首先需要知道图像内要变为可单击链接的每个区域的数字像素坐标。

2.创建客户端图像映射

从以下代码开始

在图像的每个区域各使用一个<area />标签。该标签有4个属性（见下表）

标签/属性	功能
<img/>	在文档中插入一幅图像
属性
src=”图像URL”	图像的URL
alt=”描述”	映射区域的文本描述
title=”描述”	区域文本描述
usemap=”名称”	为客户端图像映射指定的图像映射名。
标签/属性	功能
<map>…</ map>	客户端图像映射，由<img usemap=”…”。包含一个或多个<area/>标签
<area />	在用户端图像映射中定义可单击的链接
属性
shape=”值”	可单击区域形状，取值：rect、poly、circle
cords=”值”	图像可单击区域的坐标；其含义和设置随区域类型而异
href=”链接url”	单击区域时应加载的URL
alt=”描述”	区域的文本描述，目的是当图像不能显示时替代图像显示