要求实现层随底图的相对位置不变，层的位置随浏览器的缩放变化

页面是张图，在页面中居中显示，层是图上的标记
当浏览器窗口大小变化时，底图也随之在X轴上移动
层的left和top值是从数据库中取出的，
如何让层也随浏览器窗口的缩放而改变位置，使得层与底图的相对位置不变

12 个解决方案

#1

功能实现就结题，谢谢大家了
我实在是弄不出来了，头都大了！

#2

贴出代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
</SCRIPT>
<DIV id=TipLayer style="Z-INDEX: 1000; VISIBILITY: hidden; POSITION: absolute; TOP: -100px"></DIV>
<table cellpadding="0" cellspacing="0" bgcolor="#FFCCCC" width="770">
<tbody>
<tr>
<td align="center"><img align="middle" src="http://www.bestwood.com/gb/1YT/2datamap/image/Maptaichung.jpg">
</td>
</tr>
</tbody>
</table>
<div id="Layer2" style="position:absolute; width:18px; height:15px; z-index:41; left: 300px; top: 100px;">
<img src="http://www.km110.net/ResFile/FileIcon/0016/50.png" alt="mark2" >
</div>

</body>
</BODY>
</HTML>

#3

严重关注中，我也遇到了同样的问题

#4

offsetX,offsetY

#5

<table cellpadding="0" cellspacing="0" bgcolor="#FFCCCC" width="100%">
<tbody>
<tr>
<td align="center">
<img align="middle" src="http://www.bestwood.com/gb/1YT/2datamap/image/Maptaichung.jpg" style="width:600;">
<div id="Layer2" style="position:absolute;">
<img src="http://www.km110.net/ResFile/FileIcon/0016/50.png" alt="mark2" style="position:relative; width:50px; height:50px; z-index:41; left: -470px; top: 120px;">
</div>
</td>
</tr>
</tbody>
</table>

-----
相关知识：
依附div对象的定位问题
http://jkisjk.spaces.live.com/blog/cns!758CACE25E89DD3B!378.entry

#6

该回复被版主删除

#7

zeroleonhart(Strong Point:Algorithm):

能给一段代码例子吗？
谢谢~

#8

JK_10000(JK)：

好象你的blog中的例子跟我要实现的功能没什么关系啊！

#9

你可以这样来解决：
1。首先把底图Div的position属性设置成absolute，让他可以浮动，从而能够居中。
2。绑定window的onresize事件，从而设置底图的位置可以居中。
3。给底图Div添加子元素，也就是那些标记，然后把这些标记的position属性设置为absolute，这样标记的位置是相对于底图，因此当底图变更位置时，标记也会跟着移动，并使相对位置不变。

#10

eyaa() ( ) 信誉：100    Blog  2006-08-25 08:47:00  得分: 0
   JK_10000(JK)：好象你的blog中的例子跟我要实现的功能没什么关系啊！

------------------
五楼JK的代码有没有解决你的问题？
如果解决了，blog里的那篇是解释为什么能解决你的问题的
简而言之，就是：
用一个absolute套一个relative的层，可以解决部分“依附div对象的定位问题”

#11

wideroad() ，你说的“绑定window的onresize事件，从而设置底图的位置可以居中”是什么意思啊？
能具体点儿吗？

#12

就是你给onresize事件绑定一个处理方法，当窗口大小变化时，始终让底图居中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
    <script type="text/javascript">
        //  把一个对象居中
        function setToCenter(element)
        {
            var documentRect = getDocumentRect();
            var divRect = getRect(element);
            divRect.left = Math.ceil((documentRect.width - divRect.width)/2);
            divRect.top = Math.ceil((documentRect.height - divRect.height)/2);
            element.style.left = divRect.left + "px";
            element.style.top = divRect.top + "px";
        }
        //  取得当前窗口的大小
        function getDocumentRect()
        {
            var rect =
            {
                left:0,
                top:0,
                width:document.documentElement.clientWidth,
                height:document.documentElement.clientHeight
            };
            return rect;
        }
        //  取得相对与offsetParent的距离
        function getOffsetRect(element)
        {
            var rect =
            {
                "left":element.offsetLeft,
                "top":element.offsetTop,
                "width":element.offsetWidth,
                "height":element.offsetHeight,
                "right":element.offsetLeft + element.offsetWidth,
                "bottom":element.offsetTop + element.offsetHeight
            }
            return rect;
        }
        //  取得一个对象的绝对位置
        function getRect(element)
        {
            var rect = getOffsetRect(element);
            while(element = element.offsetParent)
            {
                rect.left += element.offsetLeft;
                rect.top += element.offsetTop;
            }
            rect.right = rect.left + rect.width;
            rect.bottom = rect.top + rect.height;
            return rect;
        }
    </script>
</head>
<body>
<div id="div1" style="width:200px;height:200px;background:Gray;position:absolute;"></div>
</body>
</html>
<script type="text/javascript">
    function setCenter()
    {
        setToCenter(document.getElementById("div1"));
    }
    window.onresize = setCenter;
    setCenter();
</script>

#1