html中map标签使用

img


你们好呀，我想知道这个该如何使用map标签呢，感谢大家啦！要求见图片！

可以用Dreamweaver等编辑器添加多边形热点，下面为青海，西藏为例的html代码，可以直接用，其他区域题主按照gif动图绘制即可。

<img src="http://www.w3dev.cn/map.jpg" usemap="#Map" border="0"  />
<map name="Map" id="Map">
  <area shape="poly" coords="333,362,350,365,377,377,399,379,426,384,451,399,471,413,478,432,471,456,459,473,461,493,461,503,444,500,443,511,413,499,396,479,388,484,382,497,373,515,352,520,342,508,325,498,302,487,279,478,261,466,261,442,266,417,278,414,297,417,292,405,294,399,289,382,283,369,328,364" href="https://baike.baidu.com/item/青海/31638" />
  <area shape="poly" coords="384,507,397,516,400,537,404,563,396,583,384,595,373,594,366,595,348,593,322,593,290,609,271,594,266,581,238,574,224,581,219,573,207,572,183,567,166,554,154,541,143,526,128,506,109,493,103,498,90,477,74,466,69,449,78,436,90,441,92,420,97,409,109,400,123,392,132,392,149,397,164,399,200,405,215,404,248,399,265,407,260,442,263,467,283,483,321,501,348,521,379,513,385,506" href="https://baike.baidu.com/item/西藏/130045" />
</map>

注意绘制完每个区域的多边形任热点后，点下上面导航栏的map标记，再点击图片后绘制行新的的多边形热点

img


<html>
<body>
<img
src="/china.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

</body>
</html>

“html map标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。因为中的 usemap 属性可引用中的 id 或 name 属性(取决于浏览器),所以我们应同时向添加 id 和 name 属性。”


HTML标签 | 菜鸟教程HTML <map> 标签 实例 带有可点击区域的图像映射： <img src='planets.gif' width='145' height='126' alt='Planets' usemap='#planetmap'>.. https://www.runoob.com/tags/tag-map.html

看看文档。
注意 img 图片的 width，height 不一样 其 coords 就会改变 。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         img{
            width: 1400px;

         }
    </style>
</head>

<body>
 701x394
    <p>点击新疆维吾尔自治区，注意变化：</p>

    <img src="http://m.onegreen.net/maps/m/a/zhongguo1.jpg"   alt="Planets"
        usemap="#planetmap">

    <map name="planetmap">
        <area shape="circle" coords="400,400,200" alt="新疆维吾尔自治区"
            href="https://baike.baidu.com/item/%E6%96%B0%E7%96%86/132263?fromtitle=%E6%96%B0%E7%96%86%E7%BB%B4%E5%90%BE%E5%B0%94%E8%87%AA%E6%B2%BB%E5%8C%BA&fromid=906636&fr=aladdin">
        
      
    </map>
</body>

</html>

作用：定义一个客户端图像映射。
说明：图像映射（image-map）指带有可点击区域的一幅图像。
注释：area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。中的 usemap 属性可引用中的 id 或 name 属性（取决于浏览器），所以我们应同时向添加 id 和 name 属性。

Planets

Venus

Mercury

Sun

注释：img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。

map使得这个图片可点击，结合area实现跳转功能
Planets

VenusMercurySun

甘肃的省份 扣点 眼睛扣瞎了 你还不如用echarts 做还方便些



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 1400px;

        }
    </style>
</head>

<body>
    701x394
    <p>点击新疆维吾尔自治区，注意变化：</p>
    <img src="http://m.onegreen.net/maps/m/a/zhongguo1.jpg" alt="Planets" usemap="#planetmap">
    <map name="planetmap">
        <area shape="polygon"
            coords="578,363,585,364,593,364,596,365,599,369,600,376,603,381,604,384,607,390,607,394,607,397,605,397,602,399,601,402,605,404,607,409,608,409,612,413,617,417,619,422,619,428,625,422,632,422,633,422,637,422,637,422,644,421,648,421,656,421,658,423,658,431,656,438,653,439,650,443,646,445,642,447,642,447,646,451,654,453,657,458,660,460,667,463,671,466,674,472,675,476,676,477,687,485,687,485,688,485,691,485,694,481,694,480,692,475,699,471,703,471,708,471,716,473,722,472,727,467,730,467,738,467,745,468,745,476,743,482,735,487,732,494,732,501,731,509,733,515,740,516,745,522,751,522,751,522,754,525,754,531,748,534,751,541,751,541,755,542,754,549,752,551,749,554,744,557,741,561,727,562,718,556,714,548,710,538,708,536,708,532,705,525,703,522,702,520,693,515,681,510,669,510,666,498,653,490,643,491,635,483,634,478,627,473,626,473,620,472,617,472,604,473,604,473,594,468,594,468,589,463,580,462,585,472,573,485,573,485,568,488,564,489,562,489,546,489,539,484,526,476,520,473,514,469,505,463,501,460,493,459,490,458,474,454,487,454,486,445,491,440,491,434,496,424,517,424,535,421,515,421,527,415,528,408,547,399,564,394,563,392,567,389,569,385,570,379,570,374,573,371,576,367,580,366"
            alt="新疆维吾尔自治区"
            href="https://baike.baidu.com/item/%E6%96%B0%E7%96%86/132263?fromtitle=%E6%96%B0%E7%96%86%E7%BB%B4%E5%90%BE%E5%B0%94%E8%87%AA%E6%B2%BB%E5%8C%BA&fromid=906636&fr=aladdin">
    </map>
</body>

</html>

这个的名称叫做热区,你可以搜一下对应的视频.一楼的这个说法是比较有效的:可以用Dreamweaver等编辑器添加多边形热点

用法：
Planets

VenusMercurySun

使用说明：
htmlmap标签:定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

　　定义map：

　　<mapid="im_map"name="im_map">

　　<areashape="rect"coords="0,0,100,100"href="url.html"/>

　　

　　map标签定义map，area标签定义可点击的热点，area属性;

　　shape：定义热点形状，可选参数rect(矩形)、circle(圆形)、poligon(自定义形状)。

　　coords：定义形状路径;

　　当shape=rect时，四个数字依次为：起点X、起点Y、终点X、终点Y

　　当shape=circle时，三个数字依次为：中心点X、中心点Y、半径

　　当shape=poligon时，可定义多个路径点，依次为：起点X、起点Y、路径1X、路径1Y、路径2X、路径2Y......

　　href定义点击跳转的地址。

　　htmlmap标签必需的属性：

　　id：unique_name：为map标签定义唯一的名称。

　　htmlmap标签可选的属性：

　　name：mapname：为image-map规定的名称。