img usemap属性 中国地图链接
- 博客分类:
- 工作日常心得
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 747获得cookie中的"loginName" ... -
在servlet和filter中获取Spring上下文
2012-07-18 11:32 2529在servlet中 方法一:在spring上下文加载到内存后直 ... -
js作用域链的问题
2012-06-03 22:01 1092var name = "The Window&quo ... -
oracle10g导入导出命令
2011-08-09 16:50 837exp和imp一定要加$符号! -
oracle10g安装问题
2011-08-08 18:47 1081版本10g,安装是报错:ora-12638 身份证明检索失败, ... -
浏览器缓存
2011-07-18 17:16 745大家在系统开发中都可能会在js中用到ajax或者dwr,因为I ... -
文档类型 <!DOCTYPE HTML>
2011-07-15 11:00 891写html的时候需要定义文档类型,如果不定义,浏览器在渲染 ... -
log4j学习与应用总结
2011-07-09 17:03 1426最近几天研究log4j,个人的一些总结 严重声明问题 对于减少 ... -
获得一个节点对象的节点类型
2011-06-30 18:16 820html:<div id="aa"& ... -
JSTL 只有c:if 而没有 c:else
2011-06-10 14:00 12577在jsp中 我们可以在 《% %》中写if(){}else{} ... -
JSTL fmt数字日期格式化
2011-05-13 16:07 15041<%@ taglib uri="http:// ... -
el fn函数收藏
2011-05-12 11:28 1097可以截取,用fn函数: <%@ taglib pre ... -
多线程Java Socket编程示例
2011-03-30 14:53 837http://www.blogjava.net/sternin ... -
struts2 type="chain"时result的参数
2011-03-28 15:27 1668Type=“chain”时 result标签的参数可以有下面4 ... -
在eclipse中修改注释模板和myeclipse6.0下art+/不能用的解决办法
2011-03-09 15:45 1071注释模板设置 eclipse-->Window--> ... -
struts2学习笔记之转换器实现语言切换
2011-02-26 11:38 1190第一步,在工程src目录下新建属性文件struts.prope ... -
castor学习笔记
2011-02-21 16:02 2094castor是一个可以把java对象和XML进行相互转换的工具 ... -
获得字符串的拼音头和全拼的写法
2011-02-14 10:20 2006public class SpellCache impleme ... -
查找出clazz的声明属性以及父类的声明属性
2010-07-08 15:33 897private List _getFields(Class c ... -
关于自定义标签rtexprvalue属性
2010-07-02 11:56 1145自定义标签时,在<attribute>标签里指定& ...
相关推荐
img标签中的usemap属性可引用的map标签中的id或name属性(取决于浏览器),所以我们应同时向map标签添加id和name属性。 示例 例如我们想在下面一张图实现九个热点区域,不切图,就使用map标签。 首先用 ps 得到几...
在HTML中还可以把图片划分成多个热点区域,每一个热点域链接到不同网页的资源。 这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。这就是影像地图。
#资源达人分享计划#
$ ( "img[usemap]" ) . mapify ( ) ; 约夏克布丁 $ ( "img[usemap]" ) . mapify ( { popOver : { content : function ( zone ) { return "<strong>" + zone . attr ( "data-title" ) + "</strong>" + ...
<img src="img/机器猫.png" usemap="map" width="%" height="%"> ,50,30" href="Introduce.html" title="这是机器猫的左眼睛" target="_blank"> ,50,40" href="Introduce.html" title="这是机器猫的右眼睛"> ...
Warcraft3_UseMap01:라이브러리작성중
usemap是标签的一个属性,用作指明所使用的图像地图名,接下来为大家介绍下UserMap的使用方法,感兴趣的朋友可以参考下
<img >/images/dl.gif" width="81" height="22" border="0" usemap="#Map"> 上面的图片在<body>中 而下面这句放入<body>外 ,3,36,19" href="#"> ,3,78,18" href="#"> </map>
<SCRIPT language=JavaScript src="inc/Popup.js"></SCRIPT> ... HEIGHT: 179px" height="179" alt="" width="713" usemap="#Map" border="0" src="/uploadfile/ewebeditor/11(5).jpg" /> <tr>
翻转时区突出显示(感谢 )用法使用所有默认设置的基本通话: $ ( '#img-with-usemap-attr' ) . timezonePicker ( ) ; 一些简单的选择: $ ( '#img-with-usemap-attr' ) . timezonePicker ( { pin : '.timezone-pin...
可插拔:通过使用useMapInstance ,用户只需将自己的插件/传单扩展名附加到地图实例。 用法 安装依赖项: npm install启动示例应用程序: npm run start并检出http://localhost:8080 检出./src/example/App.tsx以...
代码如下: var props = { ’for’ : ‘htmlFor’, ’class’: ... ‘tabIndex’, usemap: ‘useMap’, frameborder: ‘frameBorder’ } 说点题外话,用json格式来创建对象的话,建议属性不需要单引号或者双引
<img src="<%= graphURL %>" width="600" height="400" border="0" usemap="#<%= filename %>"> 记得在每次调用saveChartAsPNG 方法前都要 session.removeAttribute("JFreeChart_Deleter"); 用户退出系统也记得...
<td width="530" height="175" valign="top"><img src="images/main.gif" width="530" height="175" border="0" usemap="#Map"> <td height="36" valign="top"><table width="530" border="0" cellspacing="0...
align=center> <tr> <td align=center><a name=top></a><img src="/images/skin/1/other/keke.gif" width="740" height="222" border="0" usemap=&...
<img src="images/spacer.gif" alt="setalpm" width="120" height="120" border="0" usemap="#Map" class="rss" /> ,60,63" href="sc.chinaz.com"> <h2>Retro Photos <div><span class="date">Mar ...
src="../houtaimoban/houtaimoban/images/logo.jpg" width=155 useMap=#Map border=0> <TD vAlign=top align=left width=214><TABLE cellSpacing=0 cellPadding=0 width=167 border=0> ...
2.在图片上利用映射距离usemap来实现按钮跳转。——第8尾集 3.表单必须要有name和value,因为抓包的时候,可发现必须要提交它们 4.fieldset标签——>legend、lable 5.只能用margin-top、margin-left定位div距离页面...
" ></iframe> </div><br> <img name="map" src="/image/maptop.gif" width="950" height="976" border="0" id="map" usemap="#m_map" alt="" /> <map name="m_map" id="m_map"><br> ,196,334,...
136488456.jpg" width="750" height="104" border="0" usemap="#Map11"> ,35,116,96" href=...