Javascript圖層的隱藏與顯示並控制其顯示位置

<p><br /><center><br /><a href="#" mce_href="#" title="adsf<br />adsfdddddddddd<br />asdffffffffffd</p><p>╭︿︿︿╮<br />{/ $ $ /}<br /> ( (oo) )<br /> ︶ ︶ ︶<br />╭︿︿︿╮<br />{/ $ $ /}<br /> ( (oo) )<br /> ︶ ︶ ︶">test</a><br /></center><br /></p><br /><div align="center"><br /><br /> 圖層的隱藏與顯示並控制其顯示位置<br /><br /> <br /></p><p></div><br /><p align="center"><br /><img src="http://images.sohu.com/bill/s2011/MKT/mkt/blog/wwlb/0503/160185-mkt.gif" mce_src="http://images.sohu.com/bill/s2011/MKT/mkt/blog/wwlb/0503/160185-mkt.gif" name="img1" width="160" height="185" border="0" usemap="#Map1" id="img1" /><br /><map name="Map1" id="Map1"><br /> <area shape="rect" mce_shape="rect" id="area1" coords="2,64,117,107" mce_coords="2,64,117,107" href="#" mce_href="#" onmouseover="showOrHideDiv(1,'d1','img1','area1')" onmouseout="showOrHideDiv(0,'d1','img1','area1')" /><br /> <area shape="rect" mce_shape="rect" id="area2" coords="2,139,158,183" mce_coords="2,139,158,183" href="#" mce_href="#" onmouseover="showOrHideDiv(1,'d2','img1','area2')" onmouseout="showOrHideDiv(0,'d2','img1','area2')" /><br /> <area shape="rect" mce_shape="rect" id="area3" coords="37,3,158,46" mce_coords="37,3,158,46" href="#" mce_href="#" onmouseover="showOrHideDiv(1,'d3','img1','area3')" onmouseout="showOrHideDiv(0,'d3','img1','area3')" /><br /></map><br /><div id="d1" style="display:none; position:absolute; z-index:10000;" mce_style="display:none; position:absolute; z-index:10000;"><br /><table align="center"><tr><td style="border:solid 1px red; background-color:#FF99FF" mce_style="border:solid 1px red; background-color:#FF99FF"><br /><img src="http://www.wlmessenger.net/ffmail/1.0/SilverBuddy.png" mce_src="http://www.wlmessenger.net/ffmail/1.0/SilverBuddy.png" border="0" /><br /></td></tr></table><br /></div></p><p><div id="d2" style="display:none; position:absolute; z-index:10000;" mce_style="display:none; position:absolute; z-index:10000;"><br /><table align="center" width="200"><tr><td style="border:solid 1px red; background-color:#FFFFaa;" mce_style="border:solid 1px red; background-color:#FFFFaa;"><br />AllowDrop<br /> 擷取或設定一個值，該值指示控制項是否可以接受使用者拖放到它上面的資料。<br /><br /><br /></td></tr></table><br /></div></p><p><div id="d3" style="display:none; position:absolute; z-index:10000;" mce_style="display:none; position:absolute; z-index:10000;"><br /><table align="center" width="200"><tr><td style="border:solid 1px red; background-color:#FFFFCC" mce_style="border:solid 1px red; background-color:#FFFFCC"><br /><br /><br />Anchor<br /> 擷取或設定控制項綁定到的容器的邊緣並確定控制項如何隨其父級一起調整大小。<br /></td></tr></table><br /></div><br /></p><br /><mce:script type="text/javascript"><!--<br />function showOrHideDiv(sign,divID,imgID,areaID)<br />{<br />var objImgID=document.getElementById(imgID);<br />var objAreaID=document.getElementById(areaID);<br />var objDiv = document.getElementById(divID);<br />objDiv.style.left=objImgID.offsetLeft+ objAreaID.offsetLeft +objAreaID.offsetWidth*9/10;<br />objDiv.style.top=objImgID.offsetTop+objAreaID.offsetTop +objAreaID.offsetHeight/2;</p><p>if (sign==1)<br />objDiv.style.display="";<br />else<br />objDiv.style.display="none";<br />}<br />// --></mce:script>

 

 另附幾個寬高的表示意義：

 

網頁可見地區寬： document.body.clientWidth;
網頁可見地區高： document.body.clientHeight;
網頁可見地區寬： document.body.offsetWidth (包括邊線的寬);
網頁可見地區高： document.body.offsetHeight (包括邊線的寬);
網頁本文全文寬： document.body.scrollWidth;
網頁本文全文高： document.body.scrollHeight;
網頁被捲去的高： document.body.scrollTop;
網頁被捲去的左： document.body.scrollLeft;
網頁本文部分上： window.screenTop;
網頁本文部分左： window.screenLeft;
螢幕解析度的高： window.screen.height;
螢幕解析度的寬： window.screen.width;
螢幕可用工作區高度： window.screen.availHeight;
螢幕可用工作區寬度：window.screen.availWidth;
幕可用工作區寬度：window.screen.availWidth;

scrollHeight: 擷取對象的滾動高度。
scrollLeft:設定或擷取位於對象左邊界和視窗中目前可見內容的最左端之間的距離
scrollTop:設定或擷取位於對象最頂端和視窗中可見內容的最頂端之間的距離
scrollWidth:擷取對象的滾動寬度
offsetHeight:擷取對象相對於版面或由父座標 offsetParent 屬性指定的父座標的高度
offsetLeft:擷取對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置
offsetTop:擷取對象相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平座標
event.offsetY 相對容器的垂直座標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
以上主要指IE之中，FireFox差異如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border