图片调整大小后，热点链接失效
0
悬赏园豆：10
[已解决问题]
解决于 2012-03-31 16:51
正在做一个监控项目，登录成功之后就是一个机房的鸟瞰图，铺满整个屏幕，原图片太太，在网上了找了一段调整图片大小适应窗口的代码，图片是适应窗口了，可是在图片上设置的热点链接失效了，如果保持原图片大小，热点链接是有效的。调整大小的代码如下：
<style type="text/css">
html, body {
height: 100%;
}
#bg {
z-index: -100;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
margin: 0px;
padding: 0px;
}
#bgimg {
width: 100%;
height: 100%;
margin: 0px;
border-style: none;
}
</style>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
if (!window.event) return;
var bgimg = document.getElementById("bgimg");
window.onresize = function() {
bgimg.style.width = document.body.clientWidth + "px";
bgimg.style.height = document.body.clientHeight + "px";
};
window.onresize();
};
//]]>
</script>
</head>
<body>
<div id="bg"><img id="bgimg" src="../images/datacenter.jpg" alt="机房鸟瞰图" usemap="#Map" >
<map name="Map">
<area shape="circle" coords="834,702,29" href="#">
<area shape="circle" coords="1787,576,20" href="../monitoring/air/air.jsp" target="_self">
<area shape="circle" coords="1424,1314,20" href="#">
<area shape="circle" coords="1902,1286,20" href="#">
<area shape="circle" coords="1020,555,20" href="../monitoring/ups/ups.jsp" target="_self">
<area shape="circle" coords="1581,665,20" href="../monitoring/humiture/humiture.jsp" target="_self">
<area shape="circle" coords="1341,801,20" href="#">
<area shape="circle" coords="1438,532,20" href="#">
<area shape="circle" coords="1203,656,20" href="#">
<area shape="circle" coords="1569,674,0" href="#">
<area shape="poly" coords="1773,528" href="#">
<area shape="circle" coords="1851,495,29" href="#">
</map>
</div>
</body>
请大家帮忙看看，怎样才能既自动适应窗口大小又保持热点链接有效？
最佳答案
1
coords="1851,495,29"这个里面的坐标是根据原始图片计算出来的，你在windows.load中调整了图片的显示大小，但是坐标没有调整，所以需要在“bgimg.style.height = document.body.clientHeight + "px";”这句话后添加对热点坐标的更改；
假设原图大小为orgHeight,orgWidth
新坐标的公式为：x=document.body.clientWidth/orgWidth*x;y=document.body.clientHeight/orgHeight*y;r=min(document.body.clientWidth/orgWidth,document.body.clientHeight/orgHeight)*r;
因为你的图片变形中无法保证原图比例，所以这里取变形后较小的半径。
收获园豆：10
有些不太明白， document.body.clientHeight 是指div的高度？PX是指原图片的像素还是其他？
x=document.body.clientWidth/orgWidth*x;后一个X的值是什么，是原坐标里的X吗
@单纯就要挨打: 对
@单纯就要挨打: 图片高度
@今昭: 非常感谢你的热心回答。还有两个疑问：你说x=document.body.clientWidth/orgWidth*x里后一个X是指图片高度，这个图片是原图片还是热区？如果是指原图片，那么r=min(document.body.clientWidth/orgWidth,document.body.clientHeight/orgHeight)*r里后一个r代表什么，原图片没有半径吧。
我获取了某个热区的坐标coords，这样设置:coords.x=x;coords.y=y;coords.radius=r;但是不行，从网上找了很长时间也没找到合适的代码，请问应该怎么设置？
@单纯就要挨打: 对不起，x和y我说错了，是你热点的初始坐标，r是初始的半径。
@今昭: 这样啊，我说呢。我的代码是这样，可还是不行，是我的设置不对吗？愁死了！
<script type="text/javascript">
window.onload = function() {
if (!window.event) return;
var bgimg = document.getElementById("bgimg");
var orgHeight=2700;
var orgWidth=1800;
window.onresize = function() {
bgimg.style.width = document.body.clientWidth + "px";
bgimg.style.height = document.body.clientHeight + "px";
var air=document.getElementById("air");
var x=document.body.clientWidth/orgWidth*1787;
var y=document.body.clientHeight/orgHeight*576;
if(document.body.clientWidth/orgWidth>document.body.clientHeight/orgHeight)
var r=document.body.clientHeight/orgHeight*20;
else
var r=document.body.clientWidth/orgWidth*20;
air.coords=x+","+y+","+r;
};
window.onresize();
};
</script>
@单纯就要挨打: 最好你能把你的连接给我，我在线调适试试看，否则很难知道你的问题出在哪里
其他回答(1)
0
非常感谢这位朋友的热心回答，由于时间紧迫，还是采用了笨方法-缩小图片，让热点链接固定，哎，幸好图片过大，缩小了也没什么影响，但还是有些微的挫败感，待有时间后在细细研究。