html的img标签：定义一个图像在网页中引入。它还有个usemap属性很有意思。
看看51ditu首页中有一个地图，中部有个中国地图。点击右键下载下来看下就是一个普通的图片。
但点击地图上的省份却可以触发不同的事件（或打开不同的链接），很有意思。原来是使用了usemap属性。
当然还要定义一个map标签。整份代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>img usemap属性</title>
</head>
<body>
<img src="http://img.jb51.net/maps/chinamap.gif" usemap="#Map" border="1"/>
<map name="Map" class="maparea">
<area shape="rect" coords="73,87,103,104" href="javascript:alert('新疆')">
<area shape="rect" coords="144,125,173,142" href="javascript:alert('青海')">
<area shape="rect" coords="84,158,115,175" href="javascript:alert('西藏')">
<area shape="rect" coords="220,90,257,105" href="javascript:alert('内蒙古')">
<area shape="rect" coords="348,45,389,61" href="javascript:alert('黑龙江')">
<area shape="rect" coords="346,68,371,83" href="javascript:alert('吉林')">
<area shape="rect" coords="323,84,351,100" href="javascript:alert('辽宁')">
<area shape="rect" coords="298,100,326,114" href="javascript:alert('天津')">
<area shape="rect" coords="288,120,314,136" href="javascript:alert('山东')">
<area shape="rect" coords="268,107,295,121" href="javascript:alert('河北')">
<area shape="rect" coords="207,116,235,130" href="javascript:alert('宁夏')">
<area shape="rect" coords="186,162,214,179" href="javascript:alert('四川')">
<area shape="rect" coords="256,142,281,157" href="javascript:alert('河南')">
<area shape="rect" coords="305,144,332,159" href="javascript:alert('江苏')">
<area shape="rect" coords="320,162,342,177" href="javascript:alert('上海')">
<area shape="rect" coords="216,168,243,185" href="javascript:alert('重庆')">
<area shape="rect" coords="250,162,277,177" href="javascript:alert('湖北')">
<area shape="rect" coords="283,161,308,177" href="javascript:alert('安徽')">
<area shape="rect" coords="213,196,239,209" href="javascript:alert('贵州')">
<area shape="rect" coords="243,183,269,198" href="javascript:alert('湖南')">
<area shape="rect" coords="273,185,299,200" href="javascript:alert('江西')">
<area shape="rect" coords="308,177,334,193" href="javascript:alert('浙江')">
<area shape="rect" coords="179,210,204,225" href="javascript:alert('云南')">
<area shape="rect" coords="227,214,252,228" href="javascript:alert('广西')">
<area shape="rect" coords="231,248,257,263" href="javascript:alert('海南')">
<area shape="rect" coords="292,200,319,214" href="javascript:alert('福建')">
<area shape="rect" coords="259,219,287,231" href="javascript:alert('广东')">
<area shape="rect" coords="244,231,270,246" href="javascript:alert('澳门')">
<area shape="rect" coords="276,232,304,248" href="javascript:alert('香港')">
<area shape="rect" coords="311,228,338,243" href="javascript:alert('台湾')">
<area shape="rect" coords="272,90,302,107" href="javascript:alert('北京')">
<area shape="rect" coords="196,130,222,145" href="javascript:alert('甘肃')">
<area shape="rect" coords="246,116,272,130" href="javascript:alert('山西')">
<area shape="rect" coords="224,136,252,151" href="javascript:alert('陕西')">
</map>
</body>
</html>
map标签里的area标签的几个属性意义见：http://www.w3school.com.cn/tags/tag_area.asp
这里还是记下area的shape属性，可选项有矩形，圆形和多边形。尤其要注意的是coords属性，得结合shape使用，图像左上角的坐标是 "0,0"
看看51ditu首页中有一个地图，中部有个中国地图。点击右键下载下来看下就是一个普通的图片。
但点击地图上的省份却可以触发不同的事件（或打开不同的链接），很有意思。原来是使用了usemap属性。
当然还要定义一个map标签。整份代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>img usemap属性</title>
</head>
<body>
<img src="http://img.jb51.net/maps/chinamap.gif" usemap="#Map" border="1"/>
<map name="Map" class="maparea">
<area shape="rect" coords="73,87,103,104" href="javascript:alert('新疆')">
<area shape="rect" coords="144,125,173,142" href="javascript:alert('青海')">
<area shape="rect" coords="84,158,115,175" href="javascript:alert('西藏')">
<area shape="rect" coords="220,90,257,105" href="javascript:alert('内蒙古')">
<area shape="rect" coords="348,45,389,61" href="javascript:alert('黑龙江')">
<area shape="rect" coords="346,68,371,83" href="javascript:alert('吉林')">
<area shape="rect" coords="323,84,351,100" href="javascript:alert('辽宁')">
<area shape="rect" coords="298,100,326,114" href="javascript:alert('天津')">
<area shape="rect" coords="288,120,314,136" href="javascript:alert('山东')">
<area shape="rect" coords="268,107,295,121" href="javascript:alert('河北')">
<area shape="rect" coords="207,116,235,130" href="javascript:alert('宁夏')">
<area shape="rect" coords="186,162,214,179" href="javascript:alert('四川')">
<area shape="rect" coords="256,142,281,157" href="javascript:alert('河南')">
<area shape="rect" coords="305,144,332,159" href="javascript:alert('江苏')">
<area shape="rect" coords="320,162,342,177" href="javascript:alert('上海')">
<area shape="rect" coords="216,168,243,185" href="javascript:alert('重庆')">
<area shape="rect" coords="250,162,277,177" href="javascript:alert('湖北')">
<area shape="rect" coords="283,161,308,177" href="javascript:alert('安徽')">
<area shape="rect" coords="213,196,239,209" href="javascript:alert('贵州')">
<area shape="rect" coords="243,183,269,198" href="javascript:alert('湖南')">
<area shape="rect" coords="273,185,299,200" href="javascript:alert('江西')">
<area shape="rect" coords="308,177,334,193" href="javascript:alert('浙江')">
<area shape="rect" coords="179,210,204,225" href="javascript:alert('云南')">
<area shape="rect" coords="227,214,252,228" href="javascript:alert('广西')">
<area shape="rect" coords="231,248,257,263" href="javascript:alert('海南')">
<area shape="rect" coords="292,200,319,214" href="javascript:alert('福建')">
<area shape="rect" coords="259,219,287,231" href="javascript:alert('广东')">
<area shape="rect" coords="244,231,270,246" href="javascript:alert('澳门')">
<area shape="rect" coords="276,232,304,248" href="javascript:alert('香港')">
<area shape="rect" coords="311,228,338,243" href="javascript:alert('台湾')">
<area shape="rect" coords="272,90,302,107" href="javascript:alert('北京')">
<area shape="rect" coords="196,130,222,145" href="javascript:alert('甘肃')">
<area shape="rect" coords="246,116,272,130" href="javascript:alert('山西')">
<area shape="rect" coords="224,136,252,151" href="javascript:alert('陕西')">
</map>
</body>
</html>
map标签里的area标签的几个属性意义见：http://www.w3school.com.cn/tags/tag_area.asp
这里还是记下area的shape属性，可选项有矩形，圆形和多边形。尤其要注意的是coords属性，得结合shape使用，图像左上角的坐标是 "0,0"
分享到：
发表评论
-
在js上获得cookie中指定的值
2012-08-02 10:56 788获得cookie中的"loginName" ... -
在servlet和filter中获取Spring上下文
2012-07-18 11:32 2569在servlet中 方法一：在spring上下文加载到内存后直 ... -
js作用域链的问题
2012-06-03 22:01 1126var name = "The Window&quo ... -
oracle10g导入导出命令
2011-08-09 16:50 876exp和imp一定要加$符号！ -
oracle10g安装问题
2011-08-08 18:47 1120版本10g,安装是报错:ora-12638 身份证明检索失败, ... -
浏览器缓存
2011-07-18 17:16 797大家在系统开发中都可能会在js中用到ajax或者dwr，因为I ... -
文档类型 <!DOCTYPE HTML>
2011-07-15 11:00 926写html的时候需要定义文档类型，如果不定义，浏览器在渲染 ... -
log4j学习与应用总结
2011-07-09 17:03 1460最近几天研究log4j，个人的一些总结 严重声明问题 对于减少 ... -
获得一个节点对象的节点类型
2011-06-30 18:16 859html:<div id="aa"& ... -
JSTL 只有c:if 而没有 c:else
2011-06-10 14:00 12628在jsp中 我们可以在 《% %》中写if（）{}else{} ... -
JSTL fmt数字日期格式化
2011-05-13 16:07 15077<%@ taglib uri="http:// ... -
el fn函数收藏
2011-05-12 11:28 1141可以截取，用fn函数： <%@ taglib pre ... -
多线程Java Socket编程示例
2011-03-30 14:53 874http://www.blogjava.net/sternin ... -
struts2 type="chain"时result的参数
2011-03-28 15:27 1731Type=“chain”时 result标签的参数可以有下面4 ... -
在eclipse中修改注释模板和myeclipse6.0下art+/不能用的解决办法
2011-03-09 15:45 1114注释模板设置 eclipse-->Window--> ... -
struts2学习笔记之转换器实现语言切换
2011-02-26 11:38 1214第一步,在工程src目录下新建属性文件struts.prope ... -
castor学习笔记
2011-02-21 16:02 2129castor是一个可以把java对象和XML进行相互转换的工具 ... -
获得字符串的拼音头和全拼的写法
2011-02-14 10:20 2053public class SpellCache impleme ... -
查找出clazz的声明属性以及父类的声明属性
2010-07-08 15:33 937private List _getFields(Class c ... -
关于自定义标签rtexprvalue属性
2010-07-02 11:56 1197自定义标签时，在<attribute>标签里指定& ...
相关推荐
为了实现中国地图的分区链接，我们需要对每个省份进行精确的坐标划分。这通常需要利用GIS软件或在线工具来获取每个省份的边界坐标。一旦有了这些坐标，我们就可以将它们插入到`<area>`的`coords`属性中。例如，对于...
<img src="map3.gif" usemap="#imageMap"> ,0,50,50" href="page1.html"> ,50,25" href="page2.html"> ``` 在这个例子中，`map3.gif`是图片，`imageMap`是映射名，`<area>`标签定义了两个链接区域：一个矩形区域...
在这个例子中，`name`属性指定了地图的名称，必须与`<img>`标签中的`usemap`属性值相匹配。 ##### 2.3 `<area>`标签 `<area>`标签用于定义图像中的一个热点区域，可以通过点击这个区域来跳转到指定的URL。 **属性...
在压缩包中的资源，"HTML 5 -img- usemap 属性.url"和"2.HTML -img- 标签的 usemap 属性.url"很可能是指向W3School或其他教程网站的链接，这些资源提供了更详细的教程和实例，帮助理解`usemap`属性的用法。...
`<img>`标签加载图像，`src`, `width`, `height`, `alt`, `title`, `dynsrc`和`usemap`属性分别定义图像源、尺寸、提示文本、动态源和映射。 12. **多媒体播放**：`<embed>`标签用于插入媒体文件，如音频或视频，`...
通常情况下，`<map>`标签会配合`<img>`标签一起使用，其中`<img>`标签的`usemap`属性值应与`<map>`标签的`name`或`id`属性值相匹配。 ##### 2.2 标签结构 `<map>`标签的基本结构如下： ```html <img src="image....
`usemap`属性的值是一个井号（#）后面跟着`<map>`元素的`name`属性，这将两者关联起来。 接下来，我们使用`<area>`标签定义图像上的热点区域。`<area>`标签具有多个属性，包括`shape`、`coords`和`href`： 1. `...
在USEMAP软件包中，制作多因素叠加专题图首先需要使用TABLET程序对每个评价因素进行数字化，并赋予不同的属性编码。完成数字化后，使用COMBINE程序进行图型叠加，并产生新的多边形属性编码。在这些编码中，某些特定...
在上述代码中，`<img>`标签中的`usemap`属性引用了`<map>`的`name`属性，即"#fijiMap"。接着，我们定义了三个`<area>`元素，每个都有不同的`shape`、`coords`和`href`属性。 1. `shape`属性定义了区域的形状，可以...
- `<IMG>`标签定义了图像的位置和大小，其中`useMap`属性指定了与该图像关联的地图名称。 - `<MAP>`标签定义了一个图像映射，`name`属性用于标识这个映射。 - 每个`<AREA>`标签定义了图像中的一个可点击区域，包括...
此外，标签还可以配合#锚点实现页面内部跳转，以及使用<img>标签中的usemap属性实现图像映射，创建可点击的图像区域。 表格与列表是组织信息的有效工具。标签用于创建表格，定义行，定义单元格，而用于定义表头。...
然后，我们可以在`<img>`标签中使用`usemap`属性来引用这个图像地图： ```html <img src="test.gif" usemap="#Map"> ``` 这里的`#Map`就是我们之前定义的`<map>`标签的名称。这样，当用户点击图像的相应区域时，...
6. **usemap和ismap属性**：这两个属性与图像映射有关，允许创建交互式图像，通过点击图像的不同区域链接到不同的位置。 7. **loading属性**：用于控制图像的加载方式，如`loading="lazy"`实现延迟加载，提高页面...
使用 `<img>` 标签，添加 `src` 属性指定图片路径，并使用 `usemap` 属性定义关联的热点地图。`usemap` 的值应该以 `#` 开头，后跟热点地图的名称，例如 `#pic`。 ```html <img src="图片地址" usemap="#pic"> ``` ...
3. **影像地图 `<map>` 和 `<area>`**：允许创建交互式的图像，通过`usemap`属性将图像与`<map>`关联，然后使用`<area>`定义可点击的区域。 在准备考试或学习HTML时，了解这些基本标签及其属性是至关重要的。它们...
<img src="example.jpg" usemap="#myMap"> ,0,100,100" href="#" alt="区域1" onclick="changeColor(this)"> function changeColor(area) { area.style.fill = 'blue'; // 改变颜色 area.style.opacity =...
在上面的例子中，`<img>`标签的`usemap`属性引用了`<map>`的`name`属性，这样就能将图像与映射关联起来。`<area>`元素则定义了具体的可点击区域，包括形状（如矩形`rect`、圆形`circle`、多边形`polygon`等）、坐标...
这个`name`属性的值在`<img>`标签中用`usemap`属性引用，以将图像与映射关联起来。 ```html <img src="image.jpg" usemap="#imageMap"> <!-- area标签会放在这里 --> ``` 2. `<area>`标签： - `<area>`...
`<map>`标签有一个必需的`name`属性，这个属性值用于在`<img>`标签的`usemap`属性中引用，从而将图像与映射关联起来。例如： ```html <img src="example.jpg" usemap="#imageMap" alt="Example Image"> ,0,100,...