贴出代码:
<!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="2" >
</div></body>
</BODY>
</HTML>
<!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="2" >
</div></body>
</BODY>
</HTML>
<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="2" 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
谢谢~
1。首先把底图Div的position属性设置成absolute,让他可以浮动,从而能够居中。
2。绑定window的onresize事件,从而设置底图的位置可以居中。
3。给底图Div添加子元素,也就是那些标记,然后把这些标记的position属性设置为absolute,这样标记的位置是相对于底图,因此当底图变更位置时,标记也会跟着移动,并使相对位置不变。
JK_10000(JK):好象你的blog中的例子跟我要实现的功能没什么关系啊!
------------------
五楼JK的代码有没有解决你的问题?
如果解决了,blog里的那篇是解释为什么能解决你的问题的
简而言之,就是:
用一个absolute套一个relative的层,可以解决部分“依附div对象的定位问题”
能具体点儿吗?
<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>