图像的客户端映射

---

实例

客户器端图像映射：

< 网页>
<主体>
<段落>请点击图像上的星球，把它们放大。</段落>
<图像
资源地址=“https://www.w3school.com.cn/i/eg_planets.jpg“
边框=“0“ 客户端映射=“#行星地图“
替代=“planets“ />
<地图 名字=“行星地图“ 标识=“行星地图“>
<区域
形状=“圆形“
坐标=“180,139,14“
超引用=“https://www.w3school.com.cn/example/html/venus.html“
目标=“新窗口“
替代=“venus“ />
<区域
形状=“圆形“
坐标=“129,161,10“
超引用=“https://www.w3school.com.cn/example/html/mercur.html“
目标=“新窗口“
替代=“mercury“ />
<区域
形状=“矩形“
坐标=“0,0,110,260“
超引用=“https://www.w3school.com.cn/example/html/sun.html“
目标=“新窗口“
替代=“sun“ />
</地图>
<段落><粗体>注释：</粗体> 图像 元素中的 “客户端映射“ 属性引用 地图 元素中的 “标识“ 或 “名字“ 属性（根据浏览器），所以我们同时向 地图 元素添加了 “标识“ 和 “名字“ 属性。</段落>
</主体>
</网页>

解释

上面这段源代码将一幅图像 planets.gif 映射为 3 个区域，当用户单击其中某一个区域时，将被链接到不同的文档中。

---

定义和用法

客户端映射 属性将图像定义为客户端图像映射。

图像映射指的是带有可点击区域的图像。

客户端映射  属性与 <地图> 元素的 名字 或 标识 属性相关联，以建立 <图像> 与 <地图> 之间的关系。

---

浏览器支持

所有浏览器都支持 客户端映射 属性。

---

语法

<图像 客户端映射="值">

属性值

值	描述
#地图名字	# + 要使用的 <地图> 元素的 名字 或 标识 属性

---

延伸阅读：详解 客户端映射 属性

客户端映射 属性提供了一种“客户端”的图像映射机制，有效地消除了服务器端对鼠标坐标的处理，以及由此带来的网络延迟问题。通过特殊的 <地图> 和 <区域> 标签，超文本（HTML ）创作者可以提供一个描述 客户端映射 图像中超链接敏感区域坐标的映射，这个映射同时包含相应的超链接 本地地址。客户端映射 属性的值是一个 本地地址，它指向特殊的 <地图> 区域。用户计算机上的浏览器将把鼠标在图像上单击时的坐标转换成特定的行为，包括加载和显示另外一个文档。

我们举例说明一下，下面这段源代码将一个 100x100 像素的图像 map.gif 映射为 4 个区域，当用户单击其中某一个区域时，将被链接到不同的文档中。请注意，在这个 <图像> 标签中，我们已经有效地包含了对 ismap 图像映射的处理功能，这样，那些使用不具有 usemap 处理功能的浏览器用户，就可以通过另外一中途径，即服务器端机制来处理图像映射：

<超链接 超引用=“/example/map“>
<图像 资源地址=“/i/map.gif“ 服务端映射=“服务端映射“ 客户端映射=“#map“ />
</超链接>
<地图 名字=“map“>
<区域 坐标=“0,0,49,49“ 超引用=“link1.html“>
<区域 坐标=“50,0,99,49“ 超引用=“link2.html“>
<区域 坐标=“0,50,49,99“ 超引用=“link3.html“>
<区域 坐标=“50,50,99,99“ 超引用=“link4.html“>
</地图>

服务端映射 属性和 客户端映射 属性的应用差异

地图就是很好地应用 服务端映射 和 客户端映射 属性的一个示例，例如，在浏览一家全国范围的大公司网页时，用户可能会在地图上单击他们所居住的城市，以获得附近地区零售店的地址和电话号码等。

客户端映射 客户端处理图像映射的好处是，它不要求有服务器或特殊的服务器软件，与 服务端映射 机制不同，它可以用在非 web （无网络）环境中，例如在本地的文件或者 CD-ROM 中使用。

---

---