如何解决利用map中的area对图片进行映射时,随着图片的大小不断变化,所对应的映射在图片中的相对位置保持不变
当我们在写程序时,希望能够点击图片中的某一个图标时,能够跳转到某一个页面中去,我们可以通过html的map标签来实现,例如:
当用户点击上面红色区域时,便会弹到对应的页面
代码如下(只需要对应的html代码就能实现):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>map使用方法</title>
<style>
*{margin:0 auto;padding:0;} //清除默认的边距
</head>
<body>
<img width="500px" heigth="800px" src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> //在页面中插入一张图片
//添加map标签,并增加一个映射area
<map name="planetmap" id="planetmap">
<area shape="rect" coords="34,76,94,97" href ="index.html" alt="Sun" />
</map>
</body>
</html>
需要注意的是:图片地址不能写错,并且图片的"usemap"属性值要与map标签中的“id”和“name”的属性值需要保持一致,这样map才知道是哪一张图片在“调用”他,相关的属性使用方法可以访问:http://www.w3school.com.cn/tags/tag_map.asp
不过这样做有一个弊端:如果这张图片的宽高都是变化的,那么这样写就会导致所映射到的区域不会跟随图片的移动而移动,因为area的coords所描述的经纬度是固定的,如果需要映射的区域随着图片大小的不断变化,所对应的相对位置也跟着变化。
那就得考虑图片在不断变化的时候,是什么在变化,找到规律,就能解决问题,图片在变化,无非就是图片的宽高在不断的改变,只要记住一句话:“图片的宽高在变化的同时,其实里面所对应的内容是等比例变化的”,我们假设图片一开始的默认宽高为:w,h(这个是固定的已知变量),这时候的图片当中的某一个点的坐标为:x和y(已知变量),当图片的宽高发生变化后,这时候的x和y的相对位置也发生改变了,假设我们设这时候的宽高为:W,H(未知变量),所对应的相对坐标为X,Y(我们所要求的值),
根据图片的等比例变化可得:w/W=x/X、h/H=y/Y; 因此此时的相对坐标为:X=(x*W)/w、Y=(y*H)/h
以上的代码便可以写成这样:
HTML代码:
<body>
<!--地图位置-->
<img src="img/antique.png" width="100%" height="100%" border="0" usemap="#antique" alt="zscmap" />
</body>
对应的js代码(需要引入jquery文件):
$(document).ready(function(e){
/*用于设置地图的等比例宽高*/
var W=document.documentElement.clientWidth; /*获取移动设备屏幕或浏览器的宽度*/
var H=document.documentElement.clientHeight; /*获取移动设备屏幕或浏览器的高度*/
//假设已知图片的默认宽高和已知的坐标(34,76)和(94,97)为(设置两个点的原因是因为矩形需要左上角与右下角两个点):
var w="540px";
var h="850px";
//创建地图的map标签
var zscmap=document.createElement("map"); //创建map
zscmap.setAttribute("id","antique"); //对map添加属性ID
zscmap.setAttribute("name","antique"); //对map添加属性name
document.getElementById("all_id").appendChild(zscmap); //把map对象添加到antique页面的body当中
在map中添加area
var areas=document.createElement("area");
areas.setAttribute("id","id");
areas.setAttribute("alt","alt"); //创建alt属性
areas.setAttribute("shape","rect") //创建属性shape,rect为矩形
areas.setAttribute("href","index.html"); //创建连接
document.getElementById("antique").appendChild(areas); //把area添加到map里面
document.getElementById(x).coords=((34*W)/540,(76*H)/850,(94*W)/540,(97*H)/850); //添加coords属性值,参数值顺序为左上角坐标,右下角坐标
});
本人也是摸爬滚打过来的,中间走了很多弯路,如果有更加有效的方法或者建议,或者有什么不懂的,可以联系本人,相互学习:
QQ:1434475404;龙政名