HTML5中map标签的使用 area标签中的coords怎么可以做到自适应

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5中map标签的使用 area标签中的coords怎么可以做到自适应相关的知识，希望对你有一定的参考价值。

这是一个类似于找茬的游戏，功能基本都实现了，就是不怎么知道可以做到自适应，请各位指点，先在此谢过了！！
源码链接：http://pan.baidu.com/s/1kTmmt8N
补充：area标签中样式怎么修改？

coords 中的值只能是数字，你的问题可以用 javascript 来解决

页面加载的时候，用 JavaScript 获取图片的尺寸，例如 500 * 300，当图片尺寸发生改变的时候再获取一次，例如 400 * 240，获取比例，400 / 500 = 0.8。然后使用 JavaScript 重新设定 coords

284 * 0.8
419 * 0.8
46 * 0.8 参考技术A

http://blog.csdn.net/wt20100/article/details/46548825

 参考技术B 你好，你这样问题解决了吗，我也是这样的问题，麻烦能否帮帮忙

map+area标签

map标签是用于定义一个客户端的图像映射即带有可点击区域的一幅图像，配合area标签
    area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域
    例：要实现一幅地图上鼠标点击或者悬停在某个区域，可以显示出该区域的相关介绍，就需要
    这样的map+area标签的组合
<img> 标签中的 usemap 属性可引用 <map> 中的 id 或 name 属性（由浏览器决定），所以我们需要同时向 <map> 添加 id 和 name 两个属性。


area标签中的属性：1.shape：定义该区域的形状
                      2.coords：可点击区域（对鼠标敏感区域）的坐标
                      3.href:定义该区域的URL即类似于a标签的用法提供链接
                      4.alt类似于img里的alt定义该区域的替换文本
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>map和area标签</title>
 6 </head>
 7 <body>
 8 
 9 <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
10 
11 <map name="planetmap" id="planetmap">
12     <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
13     <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
14     <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
15  
16 </map>
17 </body>
18 </html>

 

以上是关于HTML5中map标签的使用 area标签中的coords怎么可以做到自适应的主要内容，如果未能解决你的问题，请参考以下文章

map+area标签

html5 图片热点area，map的用法

html里的map标签怎么用

☆html里，如何去掉点击map里area的边框

HTML5嵌入标签整理及使用介绍

html5图片标签与属性