首页 新闻 搜索 专区 学院

图片调整大小后,热点链接失效

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>

 

请大家帮忙看看,怎样才能既自动适应窗口大小又保持热点链接有效?

单纯就要挨打的主页 单纯就要挨打 | 初学一级 | 园豆:193
提问于:2012-03-13 15:45
< >
分享
最佳答案
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
today4king | 老鸟四级 |园豆:3267 | 2012-03-13 16:45

有些不太明白, document.body.clientHeight 是指div的高度?PX是指原图片的像素还是其他?

单纯就要挨打 | 园豆:193 (初学一级) | 2012-03-14 09:56

x=document.body.clientWidth/orgWidth*x;后一个X的值是什么,是原坐标里的X吗

单纯就要挨打 | 园豆:193 (初学一级) | 2012-03-14 10:35

@单纯就要挨打: 对

today4king | 园豆:3267 (老鸟四级) | 2012-03-14 13:19

@单纯就要挨打: 图片高度

today4king | 园豆:3267 (老鸟四级) | 2012-03-14 13:20

@今昭: 非常感谢你的热心回答。还有两个疑问:你说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;但是不行,从网上找了很长时间也没找到合适的代码,请问应该怎么设置?

单纯就要挨打 | 园豆:193 (初学一级) | 2012-03-14 15:15

@单纯就要挨打: 对不起,x和y我说错了,是你热点的初始坐标,r是初始的半径。

today4king | 园豆:3267 (老鸟四级) | 2012-03-15 10:48

@今昭: 这样啊,我说呢。我的代码是这样,可还是不行,是我的设置不对吗?愁死了!

<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>

单纯就要挨打 | 园豆:193 (初学一级) | 2012-03-15 15:12

@单纯就要挨打: 最好你能把你的连接给我,我在线调适试试看,否则很难知道你的问题出在哪里

today4king | 园豆:3267 (老鸟四级) | 2012-03-15 15:33
其他回答(1)
0

非常感谢这位朋友的热心回答,由于时间紧迫,还是采用了笨方法-缩小图片,让热点链接固定,哎,幸好图片过大,缩小了也没什么影响,但还是有些微的挫败感,待有时间后在细细研究。

单纯就要挨打 | 园豆:193 (初学一级) | 2012-03-31 16:50
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册