html的img标签：定义一个图像在网页中引入。它还有个usemap属性很有意思。 看看51ditu首页中有一个地图，中部有个中国地图。点击右键下载下来看下就是一个普通的图片。 但点击地图上的省份却可以出发不同的事件（或打开不同的链接），很有意思。原来是使用了usemap属性。 当然还要定义一个map标签。整份代码如下：
<br /><html><br /><head><br /><meta http-equiv=”Content-Type” content=”text/html; charset=gbk”><br /><title>img usemap属性</title><br /></head> </p><p><body> </p><p> <img src=”http://img.jb51.net/maps/chinamap.gif” usemap=”#Map” border=”1″/> </p><p> <map name=”Map” class=”maparea”><br /> <area shape=”rect” coords=”73,87,103,104″ href=”javascript:alert(‘新疆’)”><br /> <area shape=”rect” coords=”144,125,173,142″ href=”javascript:alert(‘青海’)”><br /> <area shape=”rect” coords=”84,158,115,175″ href=”javascript:alert(‘西藏’)”><br /> <area shape=”rect” coords=”220,90,257,105″ href=”javascript:alert(‘内蒙古’)”><br /> <area shape=”rect” coords=”348,45,389,61″ href=”javascript:alert(‘黑龙江’)”><br /> <area shape=”rect” coords=”346,68,371,83″ href=”javascript:alert(‘吉林’)”><br /> <area shape=”rect” coords=”323,84,351,100″ href=”javascript:alert(‘辽宁’)”><br /> <area shape=”rect” coords=”298,100,326,114″ href=”javascript:alert(‘天津’)”><br /> <area shape=”rect” coords=”288,120,314,136″ href=”javascript:alert(‘山东’)”><br /> <area shape=”rect” coords=”268,107,295,121″ href=”javascript:alert(‘河北’)”><br /> <area shape=”rect” coords=”207,116,235,130″ href=”javascript:alert(‘宁夏’)”><br /> <area shape=”rect” coords=”186,162,214,179″ href=”javascript:alert(‘四川’)”><br /> <area shape=”rect” coords=”256,142,281,157″ href=”javascript:alert(‘河南’)”><br /> <area shape=”rect” coords=”305,144,332,159″ href=”javascript:alert(‘江苏’)”> <div class="pagination"><a title="Page"> <b>1</b>/<b>3</b> </a> <b>1</b> <a href="/cos/2020/0415/486914_2.shtml">2</a> <a href="/cos/2020/0415/486914_3.shtml">3</a> <a href="/cos/2020/0415/486914_2.shtml">下一页</a> <a href="/cos/2020/0415/486914_3.shtml">尾页</a></div> </div> </div> </div> <div class="postMore"> <div class="tab" id="tab"> <span class="active">相关文章</span> <span>大家在看</span> </div> <div class="tabdiv"> <div class="tabpane"> <ul class="articleBar"> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0226/1094164.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-26/202302261703031717.jpg" src="https://www.easck.com/d/file/p/2023/02-26/202302261703031717.jpg"></div> <div class="txtInfo"><h3>迅雷网速保护模式使用教程 怎么关闭迅雷网速保护模</h3><div class="extr clearfix"><p><span class="time fl">2023-02-26</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0211/1090481.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-11/202302111645111629.jpg" src="https://www.easck.com/d/file/p/2023/02-11/202302111645111629.jpg"></div> <div class="txtInfo"><h3>网易网盘助手使用教程</h3><div class="extr clearfix"><p><span class="time fl">2023-02-11</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0210/1090291.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://thumb10.jfcdns.com/thumb/uploadimages/20104161732406246_600_0.jpg" src="https://thumb10.jfcdns.com/thumb/uploadimages/20104161732406246_600_0.jpg"></div> <div class="txtInfo"><h3>用金山卫士清理垃圾文件</h3><div class="extr clearfix"><p><span class="time fl">2023-02-10</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0118/1087186.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-18/202301181055408637.jpg" src="https://www.easck.com/d/file/p/2023/01-18/202301181055408637.jpg"></div> <div class="txtInfo"><h3>Apng格式24位全彩高清动态图简单制作教程</h3><div class="extr clearfix"><p><span class="time fl">2023-01-18</span></p><p><span class="time fr">13万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086887.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/202301171610022716.jpg" src="https://www.easck.com/d/file/p/2023/01-17/202301171610022716.jpg"></div> <div class="txtInfo"><h3>美图秀秀背光照片修复 亮出你的灿烂笑容！</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">5万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086845.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/202301171439472066.jpg" src="https://www.easck.com/d/file/p/2023/01-17/202301171439472066.jpg"></div> <div class="txtInfo"><h3>美图秀秀：非主流花葬凄美图片</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0116/1086450.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-16/20230116102737820.jpg" src="https://www.easck.com/d/file/p/2023/01-16/20230116102737820.jpg"></div> <div class="txtInfo"><h3>妈妈必学 制作宝宝成长相册的秘诀</h3><div class="extr clearfix"><p><span class="time fl">2023-01-16</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0108/1084812.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-08/202301081520251403.jpg" src="https://www.easck.com/d/file/p/2023/01-08/202301081520251403.jpg"></div> <div class="txtInfo"><h3>pptv设置在哪 pptv怎么定时关机</h3><div class="extr clearfix"><p><span class="time fl">2023-01-08</span></p><p><span class="time fr">6万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0104/1083538.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-04/202301041208421292.jpg" src="https://www.easck.com/d/file/p/2023/01-04/202301041208421292.jpg"></div> <div class="txtInfo"><h3>百度音乐盒打不开怎么办 百度音乐盒打不开解决方法</h3><div class="extr clearfix"><p><span class="time fl">2023-01-04</span></p><p><span class="time fr">2万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2022/1230/1082790.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2022/12-30/20221230183812947.jpg" src="https://www.easck.com/d/file/p/2022/12-30/20221230183812947.jpg"></div> <div class="txtInfo"><h3>亲淘怎么加好友 亲淘加好友教程</h3><div class="extr clearfix"><p><span class="time fl">2022-12-30</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> </ul> </div> </div> <div class="tabpane"> <ul class="articleBar"> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0226/1094164.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-26/202302261703031717.jpg" src="https://www.easck.com/d/file/p/2023/02-26/202302261703031717.jpg"></div> <div class="txtInfo"><h3>迅雷网速保护模式使用教程 怎么关闭迅雷网速保护模</h3><div class="extr clearfix"><p><span class="time fl">2023-02-26</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0211/1090481.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-11/202302111645111629.jpg" src="https://www.easck.com/d/file/p/2023/02-11/202302111645111629.jpg"></div> <div class="txtInfo"><h3>网易网盘助手使用教程</h3><div class="extr clearfix"><p><span class="time fl">2023-02-11</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0210/1090291.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://thumb10.jfcdns.com/thumb/uploadimages/20104161732406246_600_0.jpg" src="https://thumb10.jfcdns.com/thumb/uploadimages/20104161732406246_600_0.jpg"></div> <div class="txtInfo"><h3>用金山卫士清理垃圾文件</h3><div class="extr clearfix"><p><span class="time fl">2023-02-10</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0118/1087186.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-18/202301181055408637.jpg" src="https://www.easck.com/d/file/p/2023/01-18/202301181055408637.jpg"></div> <div class="txtInfo"><h3>Apng格式24位全彩高清动态图简单制作教程</h3><div class="extr clearfix"><p><span class="time fl">2023-01-18</span></p><p><span class="time fr">13万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086887.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/202301171610022716.jpg" src="https://www.easck.com/d/file/p/2023/01-17/202301171610022716.jpg"></div> <div class="txtInfo"><h3>美图秀秀背光照片修复 亮出你的灿烂笑容！</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">5万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0117/1086845.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-17/202301171439472066.jpg" src="https://www.easck.com/d/file/p/2023/01-17/202301171439472066.jpg"></div> <div class="txtInfo"><h3>美图秀秀：非主流花葬凄美图片</h3><div class="extr clearfix"><p><span class="time fl">2023-01-17</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0116/1086450.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-16/20230116102737820.jpg" src="https://www.easck.com/d/file/p/2023/01-16/20230116102737820.jpg"></div> <div class="txtInfo"><h3>妈妈必学 制作宝宝成长相册的秘诀</h3><div class="extr clearfix"><p><span class="time fl">2023-01-16</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0108/1084812.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-08/202301081520251403.jpg" src="https://www.easck.com/d/file/p/2023/01-08/202301081520251403.jpg"></div> <div class="txtInfo"><h3>pptv设置在哪 pptv怎么定时关机</h3><div class="extr clearfix"><p><span class="time fl">2023-01-08</span></p><p><span class="time fr">6万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0104/1083538.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-04/202301041208421292.jpg" src="https://www.easck.com/d/file/p/2023/01-04/202301041208421292.jpg"></div> <div class="txtInfo"><h3>百度音乐盒打不开怎么办 百度音乐盒打不开解决方法</h3><div class="extr clearfix"><p><span class="time fl">2023-01-04</span></p><p><span class="time fr">2万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2022/1230/1082790.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2022/12-30/20221230183812947.jpg" src="https://www.easck.com/d/file/p/2022/12-30/20221230183812947.jpg"></div> <div class="txtInfo"><h3>亲淘怎么加好友 亲淘加好友教程</h3><div class="extr clearfix"><p><span class="time fl">2022-12-30</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> </ul> </div> </div> <footer> <p><a href="https://www.easck.com">电脑版</a> - <a href="https://wap.easck.com">移动首页</a></p> <div style="display:none"><script type="text/javascript" src="/skin/wap/tongji.js"></script></div> </footer> <script type="application/ld+json"> { "@context": "https://zhanzhang.baidu.com/contexts/cambrian.jsonld", "@id": "https://wap.easck.com/cos/2020/0415/486914.shtml", "title": "img usemap属性 中国地图链接-易采站长站", "description": "html的img标签：定义一个图像在网页中引入。它还有个usemap属性很有意思。 看看51ditu首页中有一个地图，中部有个中国地图。点击右键下载下来看下就是一个普通的图片。 但点击地图上", "pubDate": "2020-04-15 T 22:30:37+08:00", "upDate": "2020-04-15 T 22:30:37+08:00", "data":{ "WebPage":{ "pcUrl":"https://www.easck.com/cos/2020/0415/486914.shtml", "wapUrl":"https://www.easck.com/cos/2020/0415/486914.shtml", "fromSrc":"易采站长站" } } } </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html>
