html实现图像映射(map area标签的用法)

最新推荐文章于 2024-08-14 08:09:47 发布

ChenCarry

最新推荐文章于 2024-08-14 08:09:47 发布

阅读量4.5k

点赞数 6

分类专栏： HTML 文章标签： html map area

本文链接：https://blog.csdn.net/dsdsds111/article/details/86755806

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<p>点击广东省各地区，了解详情！</p>

<img src="gd.jpg"  alt="guangdong" usemap="#guangdong">

<map name="guangdong">
    <area shape="poly" coords="492,78,513,78,513,54,561,54,594,68,628,143,574,200,502,222,454,225,454,205,496,183" href="yuedong.html" alt="yuedong">
</map>
</body>
</html>

效果

在这里插入图片描述

当我点击图片中“粤东”时，会跳转到yuedong.html页面

在这里插入图片描述

Tab键索引可以看到area区域，如下

在这里插入图片描述

在img标签中
在这里插入图片描述
usemap 属性将图像定义为客户端图像映射。

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

usemap 属性与 map 元素的 name 或 id 属性相关联（由浏览器决定）（Chrome浏览器只支持name属性值关联），以建立 img 与 map 之间的关系。

area 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。

area 元素总是嵌套在 map 标签中。
在这里插入图片描述
其中：
shape=“rect” 表示设定热点的形状为矩形，左上角顶点坐标为（X1,y1），右下角顶点坐标为（X2,y2）。

shape=“circle” 表示设定热点的形状为圆形，圆心坐标为（X1,y1），半径为r。

shape=“poly” 表示设定热点的形状为多边形，各顶点坐标依次为（X1,y1）、（X2,y2）、（x3,y3） …。

shape=“default” 表示整个图像区域 coords 用于标识映射区域的边界。

延伸阅读：详解 usemap 属性

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

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

<a href="/example/map">
  <img src="/i/map.gif" ismap="ismap" usemap="#map" />
</a>

<map name="map">
  <area coords="0,0,49,49" href="link1.html">
  <area coords="50,0,99,49" href="link2.html">
  <area coords="0,50,49,99" href="link3.html">
  <area coords="50,50,99,99" href="link4.html">
</map>

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

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