Map常识
请自己看吧:http://www.w3school.com.cn/tags/tag_map.asp
Map自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
html,body{padding: 0; margin: 0;}
</style>
</head>
<body>
<img src="img/img.jpg" border="0" usemap="#planetmap" alt="Planets" width="100%"/>
<map name="planetmap" id="planetmap">
<area shape="rect" coords="130,40,136,60" id="eye" href ="#" alt="eye" />
</map>
<script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>
<script>
$("#eye").click(function(){
alert("眼睛");
})
//重新定位map位置
function rsz(){
//正常情况下为386尺寸:计算比例
var bl=$("body").innerWidth()/386;
var x1=bl*130;
var y1=bl*40;
var x2=bl*136;
var y2=bl*60;
//重新计算位置
$("#eye").attr({"coords":x1+","+y1+","+x2+","+y2})
}
//窗口宽度改变时执行
$(window).resize(function() {
rsz();
});
//页面初始化时候执行
$(function(){
rsz();
})
</script>
</body>
</html>
时间： 2024-07-30 08:54:44