在Html中，给图像使用map标签，可以给图像的某个部分建立超连接，用法如下：
Java代码
- <img src=img.gif usemap= "MAP-Name" >
- <map name="MAP-Name" >
- <area shape="rect|circle|poly" coords= "#" href= "url" >
- </map>
<img src=img.gif usemap="MAP-Name"> <map name="MAP-Name"> <area shape="rect|circle|poly" coords="#" href="url"> </map>
注:所有的坐标都是相对于图片左上角的
其中，坐标coords对各个shape的解释如下：
Java代码
- shape= "rect" coords= "x1,y1,x2,y2" // (x1,y1)=Upper Left, (x2,y2)=Lower Right
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)及半径
Java代码
- 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..." // (x1,y1>=First Corner, (x2,y2)=Second Corner, ...
即，当shape是poly多边形时，coords表示多边形所有顶点的坐标(x1,y1),(x2,y2),(x3,y3)...
注意：以上所有坐标都是相对于图形img.gif左上脚坐标而言的
以下是一个例子:
Java代码
- <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>
<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网站中摘下来的一个实例：
Java代码
- <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>
分享到：
发表评论
-
页面相似度的概念
2011-02-28 12:29 1599页面相似度一直是站长 ... -
在CSS中定义a:link、a:visited、a:hover、a:active顺序
2011-02-28 08:43 2677CSS样式表中a:link,a:visited ... -
HTML模板和CSS基准样式（三）
2011-02-24 17:23 1253今 天是这个连载的最后一部分，内容关于网页的布局。 ... -
HTML模板和CSS基准样式（二）
2011-02-24 17:08 976今天，我要写的是CSS文件的模块化。 如果你看过CS ... -
HTML模板和CSS基准样式（一）
2011-02-24 17:07 887我经常写网页。 很多人喜欢用Dreamwea ... -
Wordpress图片相册插件/ Gallery Plugins
2011-02-24 11:14 2736用插件把你的图片相册 打扮的更加漂亮, 更加容易自己管理, ... -
用wordpress搭建专业的企业网站
2011-02-24 10:02 1156在看该文档之前需要对WordPress 主题模板的层 ... -
十大WordPress的SEO优化技巧
2011-02-24 09:59 1077WordPress 系统本身， ... -
网页设计的步骤FireWorks
2011-02-14 14:04 1673设计网页按这几个步骤进行： (1)先知道需求和了解要设计的页 ... -
网站优化的一些工具和RP查询地址
2011-02-14 11:06 1154网站优化的一些工具和RP查询地址 网站PR值查询http: ... -
10个给力的在线Web设计开发工具介绍
2011-02-09 21:44 8501.在线文本生成器 BlindTextGenerator ... -
web开发插件
2011-01-04 19:41 666一、firebug: Firebug是firef ...
相关推荐
### HTML `map` 标签使用详解 #### 一、引言 HTML（HyperText Markup Language）是构成网页的基础语言之一，在网页设计与开发中扮演着至关重要的角色。`<map>`标签作为HTML中的一个重要组成部分，主要用于定义图像...
### HTML图像地图(map)标签的使用 在网页设计与开发中，HTML的`<map>`标签扮演着一个非常重要的角色，它允许我们为图像创建可交互的热点区域，即所谓的图像映射(image-map)。通过这种方式，用户可以点击图像上的...
注意，虽然`<map>`和`<area>`标签在HTML4和HTML5中都有支持，但在HTML5中，`<map>`标签已被推荐用于语义化更好的`<figure>`和`<figcaption>`元素结合使用。例如： ```html 交互式图像"> 这是一个交互式图像 ...
【jQuery开发的地图热点特效——Map标签详解】 在Web开发中，地图热点特效是一种常见的交互功能，它可以增强用户体验，使用户能够点击地图上的特定区域获取更多信息或执行特定操作。本篇文章将深入探讨如何利用...
在上面的例子中，`<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控件中的某个区域被点击时，只有这个面板内的内容会进行更新，而...
`<map>`标签定义了一个图像映射，并通过`name`属性来标识。这个名称将在`<img>`标签中引用，将图像与映射关联起来。例如： ```html <img src="fj_map.png" alt="Fiji Map" usemap="#fijiMap"> <map name="fijiMap">...
HTML5 中的标签列表是指在 HTML 5 中定义的所有标签元素，共有 79 个标签，这些标签元素都是 HTML 5 中的基本组成部分，每个标签都有其特定的用途和作用。下面是 HTML5 中所有标签的详细列表： 1. <!--...--> : ...
在HTML中，热区通常通过`<map>`和`<area>`标签来实现。`<map>`标签定义了一个图像映射，即关联一个图像和一组定义的热区。`<area>`标签则用于定义热区的具体形状、坐标和行为。以下是创建热区的基本步骤： 1. **...
标签：mapstruct、中文文档、jar包、java； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用。
标签：mapstruct、中文文档、jar包、java； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用。
map标签 定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。 area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。 img标签中的usemap属性可引用的map标签中的id或name...
标签：mapstruct、jar包、java、中文文档； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用。