html<map>使用例子记录

最新推荐文章于 2022-08-30 14:51:05 发布

十年树木_2015

最新推荐文章于 2022-08-30 14:51:05 发布

阅读量985

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_30337695/article/details/51742608

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近在工作中遇到html标签<map>的使用：

记录下地图<map>的使用过程：

html代码：

<div class="index_map">
        <img src="__INS__/img/map/江苏 Hover.png" class="jiangsu_map" usemap="#jiangsumap">
        <img src="__INS__/img/map/南通.png" class="nantong_map" data-name="南通">
        <img src="__INS__/img/map/盐城.png" class="yancheng_map" data-name="盐城">
        <img src="__INS__/img/map/苏州.png" class="suzhou_map" data-name="苏州">
        <map name="jiangsumap" id="jiangsumap">
        	<!-- 南通 -->
        	<area shape="poly" coords="319,244,330,249,334,258,343,262,355,261,366,260,375,260,383,265,392,271,400,273,408,277,420,279,424,274,423,269,420,264,417,260,410,253,402,251,394,247,390,243,389,238,391,231,388,226,376,222,370,219,362,216,358,210,355,209,344,208,336,209,330,209,328,205,322,203,315,200,309,198,303,196,296,195,289,198,292,203,294,210,299,216,295,218,294,222,292,227,292,231,303,233,312,238,316,242" data-name="nantong_map" class="map_city"  />
        	<!-- 盐城 -->
        	<area shape="poly" coords="280,90,274,90,272,92,272,97,273,100,274,106,274,109,270,113,267,113,263,118,259,121,256,124,254,128,254,130,256,134,257,138,259,139,262,144,265,146,270,148,266,154,268,161,280,163,291,162,301,165,307,168,311,170,310,173,308,179,305,180,300,180,297,181,294,187,290,189,289,193,290,196,301,194,305,194,310,198,317,201,322,204,326,204,331,208,340,206,350,208,356,210,361,210,363,203,362,199,365,192,366,186,367,182,361,180,359,176,358,170,360,166,358,164,357,156,356,148,355,137,354,132,351,120,351,109,348,99,348,95,310,76,293,86" data-name="yancheng_map" class="map_city" />
        	<!-- 苏州 -->
        	<area shape="poly" coords="292,239,300,239,307,242,315,243,319,242,326,245,330,251,333,257,338,260,345,261,351,264,358,272,367,286,359,283,351,283,344,288,342,295,341,298,336,295,332,298,330,302,330,305,313,300,314,311,292,310,286,315,277,315,266,319,263,309,257,307,257,303,261,302,261,296,254,296,249,293,252,290,259,290,268,289,263,286,262,282,269,280,273,276,276,274,289,276,292,273,297,271,293,266,294,262,301,257,297,253,292,248,289,241" data-name="suzhou_map" class="map_city" />
        </map>
</div>

然后写在<area>上面鼠标移动、点击等事件；

最后鼠标放在地图区域上的效果：