动态 显示/隐藏 新图层的尝试与问题

本人尝试用Javascript来实现“动态 显示/隐藏 新图层”的功能。其典型应用是淘宝网站：当鼠标移动到宝贝缩略图上时，在该缩略图的旁边显示一个新的图层，其中显示放大的宝贝图片；当鼠标从宝贝缩略图和新图层上移走时，新图层自动消失。技术的关键：
1、新图层的动态显示/消失
2、新图层显示位置的动态确定我的初步实现方案：
1、用ASP.NET的Gridview作为数据显示控件
2、通过创建嵌套图层来实现新图层的动态显示/消失。具体代码如下：
后台代码（C#）
<asp:GridView ID="GridViewTasks" runat="server" DataKeyNames="TaskId" SkinID="gridviewSkin_1" OnRowDataBound="GridViewTasks_RowDataBound" OnPageIndexChanging="GridViewTasks_PageIndexChanging" >
  <Columns>    
      <asp:TemplateField HeaderText="广播区域">
          <ItemTemplate >
              <div id="AreaList" onmouseover="showDetailAreas();">
              <asp:BulletedList ID="BulletedListAreas" runat="server" BulletStyle="Square" >
                <asp:ListItem>123</asp:ListItem>
                <asp:ListItem>456</asp:ListItem>
              </asp:BulletedList>
              </div>
          </ItemTemplate>
      </asp:TemplateField>
  </Columns>
</asp:GridView>前台代码（JavaScript）：
    // 获取网页对象
    var docEle = function() {
      return document.getElementById(arguments[0]) || false;
    }
    
    // 显示新图层
    function showDetailAreas() {
      if (docEle("child")) 
        docEle("parent").removeChild(docEle("child"));
        
      if (docEle("parent")) 
        docEle("AreaList").removeChild(docEle("parent"));
    
      // 新建父图层（作为子图层定位的参考）
      var parentDiv = document.createElement("div");
      parentDiv.id = "parent";
      parentDiv.style.position = "relative";  // 相对定位
      parentDiv.style.width = "0px";  // 不影响其他网页对象的排版
      parentDiv.style.height = "0px"; // 不影响其他网页对象的排版
      parentDiv.style.zIndex = "1";
      docEle("AreaList").appendChild(parentDiv);  // 插入到图层AreaList中，作为子图层定位的参考
      
      // 当鼠标离开缩略图而且鼠标不在新图层上时，删除新图层
      docEle("AreaList").onmouseout = function() {
        if (!docEle("child").contains(window.event.srcElement))
        {
          if (docEle("child")) 
            docEle("parent").removeChild(docEle("child"));
        
          if (docEle("parent")) 
            docEle("AreaList").removeChild(docEle("parent"));
        }
      }
      
      // 新建子图层
      var childDiv = document.createElement("div");
      childDiv.id = "child";
      childDiv.style.position = "absolute";    // 绝对定位
      childDiv.style.zIndex = "2";
      childDiv.style.width = "200px";
      childDiv.style.height = "200px";
      childDiv.style.left = "50px";
      childDiv.style.top = "-50px";
      childDiv.style.border = "1px solid #666666";
      childDiv.style.padding = "5px";
      //childDiv.style.filter = "alpha(Opacity=50)";
      childDiv.style.background = "#000"; 
      childDiv.innerHTML = "Chen Dong ";
      
      // 当鼠标离开新图层时，删除新图层
      childDiv.onmouseout = function() {
        if (docEle("child")) 
          docEle("parent").removeChild(docEle("child"));
        
        if (docEle("parent")) 
          docEle("AreaList").removeChild(docEle("parent"));
      }
      parentDiv.appendChild(childDiv);   // 插入到父图层中
      
    }以上方案存在问题：
1、当鼠标离开缩略图，但是鼠标还在新图层上时，新图层也被删除
2、新图层的位置总是以第一条记录为参照，不能显示在相应记录的旁边敬请大家给出宝贵建议，谢谢！e-mail: [email protected]
msn: [email protected]