在Html中，给图像使用map标签，可以给图像的某个部分建立超连接，用法如下：
<img src=img.gif usemap="MAP-Name">
<map name="MAP-Name">
<area shape="rect|circle|poly" coords="#" href="url">
</map>
注:所有的坐标都是相对于图片左上角的
其中，坐标coords对各个shape的解释如下：
shape="rect" coords="x1,y1,x2,y2" // (x1,y1)=Upper Left, (x2,y2)=Lower Right
即，当shape是矩形时，coords表示矩形左上及右下(x2, y2)的坐标
引用
shape="circle" coords="x,y,r" // (x,y)=Center, r=Radius
即，当shape是圆形时，coords表示圆中心点坐标(x, y)及半径
shape="poly" coords="x1,y1,x2,y2,x3,y3..." // (x1,y1>=First Corner, (x2,y2)=Second Corner, ...
即，当shape是poly多边形时，coords表示多边形所有顶点的坐标(x1,y1),(x2,y2),(x3,y3)...
注意：以上所有坐标都是相对于图形img.gif左上脚坐标而言的
以下是一个例子:
<img src="mapimg.gif" usemap="#Face">
<map name="Face">
<area shape="rect" href="page.html" coords="140,20,280,60">
<area shape="poly" href="image.html" coords="100,100,180,80,200,140">
<area shape="circle" href="new.html" coords="80,100,60">
</map>
下面是从360网站中摘下来的一个实例：
<html>
<body>
<div align="center"><img src="city_map.gif" width="740" height="595" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="613,103,659,129" href="http://hao.360.cn/daxue/hlj.html" title="黑龙江" target="_blank">
<area shape="rect" coords="604,153,641,172" href="http://hao.360.cn/daxue/jl.html" title="吉林" target="_blank">
<area shape="rect" coords="584,180,609,210" href="http://hao.360.cn/daxue/ln.html" title="辽宁" target="_blank">
<area shape="rect" coords="411,208,472,228" href="http://hao.360.cn/daxue/nm.html" title="内蒙" target="_blank">
<area shape="rect" coords="507,205,541,229" href="http://hao.360.cn/daxue/bj.html" title="北京" target="_blank">
<area shape="rect" coords="524,230,566,248" href="http://hao.360.cn/daxue/tj.html" title="天津" target="_blank">
<area shape="rect" coords="489,237,525,263" href="http://hao.360.cn/daxue/hebei.html" title="河北" target="_blank">
<area shape="rect" coords="526,271,567,290" href="http://hao.360.cn/daxue/sd.html" title="山东" target="_blank">
<area shape="rect" coords="454,261,486,284" href="http://hao.360.cn/daxue/sx1.html" title="山西" target="_blank">
<area shape="rect" coords="381,250,412,284" href="http://hao.360.cn/daxue/nx.html" title="宁夏" target="_blank">
<area shape="rect" coords="318,282,350,310" href="http://hao.360.cn/daxue/qh.html" title="青海" target="_blank">
<area shape="rect" coords="362,291,389,326" href="http://hao.360.cn/daxue/gs.html" title="甘肃" target="_blank">
<area shape="rect" coords="409,319,445,348" href="http://hao.360.cn/daxue/sx2.html" title="陕西" target="_blank">
<area shape="rect" coords="476,313,512,341" href="http://hao.360.cn/daxue/henan.html" title="河南" target="_blank">
<area shape="rect" coords="527,344,558,377" href="http://hao.360.cn/daxue/ah.html" title="安徽" target="_blank">
<area shape="rect" coords="558,328,585,356" href="http://hao.360.cn/daxue/js.html" title="江苏" target="_blank">
<area shape="rect" coords="591,341,631,370" href="http://hao.360.cn/daxue/sh.html" title="上海" target="_blank">
<area shape="rect" coords="564,371,597,403" href="http://hao.360.cn/daxue/zj.html" title="浙江" target="_blank">
<area shape="rect" coords="605,431,645,461" href="http://hao.360.cn/daxue/tw.html" title="台湾" target="_blank">
<area shape="rect" coords="194,374,239,395" href="http://hao.360.cn/daxue/xz.html" title="西藏" target="_blank">
<area shape="rect" coords="348,351,380,387" href="http://hao.360.cn/daxue/sc.html" title="四川" target="_blank">
<area shape="rect" coords="394,379,433,403" href="http://hao.360.cn/daxue/cq.html" title="重庆" target="_blank">
<area shape="rect" coords="465,365,511,387" href="http://hao.360.cn/daxue/hubei.html" title="湖北" target="_blank">
<area shape="rect" coords="511,401,542,430" href="http://hao.360.cn/daxue/jx.html" title="江西" target="_blank">
<area shape="rect" coords="466,408,498,439" href="http://hao.360.cn/daxue/hunan.html" title="湖南" target="_blank">
<area shape="rect" coords="397,418,433,454" href="http://hao.360.cn/daxue/gz.html" title="贵州" target="_blank">
<area shape="rect" coords="338,458,367,494" href="http://hao.360.cn/daxue/yn.html" title="云南" target="_blank">
<area shape="rect" coords="417,471,455,506" href="http://hao.360.cn/daxue/gx.html" title="广西" target="_blank">
<area shape="rect" coords="492,470,539,494" href="http://hao.360.cn/daxue/gd.html" title="广东" target="_blank">
<area shape="rect" coords="541,436,583,460" href="http://hao.360.cn/daxue/fj.html" title="福建" target="_blank">
<area shape="rect" coords="511,497,548,523" href="http://hao.360.cn/daxue/xg.html" title="香港" target="_blank">
<area shape="rect" coords="481,504,512,537" href="http://hao.360.cn/daxue/am.html" title="澳门" target="_blank">
<area shape="rect" coords="429,541,470,573" href="http://hao.360.cn/daxue/hn.html" title="海南" target="_blank">
<area shape="rect" coords="177,155,213,192" href="http://hao.360.cn/daxue/xj.html" title="新疆" target="_blank">
</map>
</div>
</body>
</html>
分享到：
相关推荐
### HTML `map` 标签使用详解 #### 一、引言 HTML（HyperText Markup Language）是构成网页的基础语言之一，在网页设计与开发中扮演着至关重要的角色。`<map>`标签作为HTML中的一个重要组成部分，主要用于定义图像...
注意，虽然`<map>`和`<area>`标签在HTML4和HTML5中都有支持，但在HTML5中，`<map>`标签已被推荐用于语义化更好的`<figure>`和`<figcaption>`元素结合使用。例如： ```html 交互式图像"> 这是一个交互式图像 ...
【jQuery开发的地图热点特效——Map标签详解】 在Web开发中，地图热点特效是一种常见的交互功能，它可以增强用户体验，使用户能够点击地图上的特定区域获取更多信息或执行特定操作。本篇文章将深入探讨如何利用...
### HTML图像地图(map)标签的使用 在网页设计与开发中，HTML的`<map>`标签扮演着一个非常重要的角色，它允许我们为图像创建可交互的热点区域，即所谓的图像映射(image-map)。通过这种方式，用户可以点击图像上的...
在上面的例子中，`<img>`标签的`usemap`属性引用了`<map>`的`name`属性，这样就能将图像与映射关联起来。`<area>`元素则定义了具体的可点击区域，包括形状（如矩形`rect`、圆形`circle`、多边形`polygon`等）、坐标...
通过以上方法，你可以创建出兼容所有浏览器的HTML图像映射，利用`<map>`和`<area>`标签为用户提供交互式的图像体验。在实际应用中，可以根据需要调整`coords`和`shape`，以适应任何复杂的图像布局。
本教程聚焦于HTML中的`map`标签和`area`标签，这两个标签是创建图像映射的重要工具，使得图像也能具有交互性，用户可以通过点击图像的不同区域跳转到不同的链接或者执行特定的JavaScript功能。 `<map>`标签是用来...
### 图像的影像地图超链接（热点区域），map标签浅谈 #### 一、概述 在Web开发领域，HTML提供了一种独特的功能——通过使用`<map>`标签及其相关属性来实现图像上的热点区域（Hotspots）链接。这种方式不仅能够增强...
"map-highlight"和"map-area"这两个标签暗示了我们将讨论的是地图组件中的特定功能，即地图区域的着色和高亮显示。 首先，我们需要理解`map-area`的概念。在HTML中，`<map>`元素与`<area>`元素结合使用，可以创建...
它常与 `<map>` 和 `<img>` 标签一起使用。例如： ```html <map name="examplemap"> ,0,82,126" href="http://www.example.com/"> </map> ``` ##### 标签：attribute - **说明**：虽然没有直接对应的 `...
本项目包含了一系列用于测试Google Map功能的HTML文件，旨在展示其在网页中的应用。以下是对每个文件及其相关知识点的详细说明： 1. **map1.html**：这个文件可能是一个基础示例，展示了如何在网页上嵌入Google Map...
2. **创建更新面板**：为了使HTML Map控件能够在不刷新整个页面的情况下进行更新，我们需要将其包裹在一个`<asp:UpdatePanel>`标签内。这样，当Map控件中的某个区域被点击时，只有这个面板内的内容会进行更新，而...
电子地图模块则采用了类似于HTML map标签的Android组件，使用户能够方便地查看和操作地图。 在定位准确性方面，论文提出了一种地图匹配算法，用于修正定位模块的误差。这种算法可以改善GPS定位常见的漂移问题，确保...
`<map>`标签定义了一个图像映射，并通过`name`属性来标识。这个名称将在`<img>`标签中引用，将图像与映射关联起来。例如： ```html <img src="fj_map.png" alt="Fiji Map" usemap="#fijiMap"> <map name="fijiMap">...
在HTML中，热区通常通过`<map>`和`<area>`标签来实现。`<map>`标签定义了一个图像映射，即关联一个图像和一组定义的热区。`<area>`标签则用于定义热区的具体形状、坐标和行为。以下是创建热区的基本步骤： 1. **...
标签：mapstruct、中文文档、jar包、java； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用。
标签：mapstruct、中文文档、jar包、java； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用。
在本项目中，“JQ+swiper+原生手写picker+map标签图片地图制作成的电子周刊”展示了如何结合多种技术来创建一个交互式的、具有导航功能的数字出版物。以下将详细介绍这些技术及其在电子周刊中的应用： 1. **jQuery ...