创建工具提示

在浏览Netflix时，当把鼠标停在一个影片的图片上时，就会看到更多关于该影片的信息。我们来模拟一下

它的功能：

1、创建一个ASP.NET AJAX Control Toolkit Website

2、Default.aspx的完整代码：

    < html  xmlns ="http://www.w3.org/1999/xhtml"   >    
    < head  runat ="server" >
       < title > Untitled Page </ title >     
    </ head >
     < body >
         < form  id ="form1"  runat ="server" >
         < asp:ScriptManager  ID ="ScriptManager1"  runat ="server"   />
        < table >
            < tr >
                < td >< img  id ="0-0"  src ="Image1.gif"   /></ td >
                < td >< img  id ="0-1"  src ="Image2.gif"   /></ td >
            </ tr >
       </ table >
        < div  id ="DataPanel"  style ="display:none; position:absolute; left:0px; top:0px;"   />
        </ form >
    </ body >
    < script  language ="javascript" > ...
  Type.registerNamespace("Test");
   
   var main = null;
   
   Test.Main = function(rows, columns) ...{        
       this._columns = columns;    
       this._dataPanel = null;
       this._imageMouseOverHandler = null;
       this._imageMouseOutHandler = null;
       this._rows = rows;
   }
   Test.Main.prototype = ...{
        dispose : function() ...{        
          for(var i = 0; i < this._rows; i++)
               for(var j = 0; j < this._rows; j++) ...{
                  image = $get(i + "-" + j);
                   $removeHandler(image, "mouseover", this._imageMouseOverHandler);
                   $removeHandler(image, "mouseout", this._imageMouseOutHandler);
               }
           delete this._imageMouseOverHandler;
           delete this._imageMouseOutHandler;
                       
           Test.Main.callBaseMethod(this, "dispose");
       },
       
       _getXCoord : function(element) ...{
           var x = 0;
          while(element)...{
               x += element.offsetLeft;
              element = element.offsetParent;
          }
          return x;
      },
  
       _getYCoord : function(element) ...{
          var y = 0;
           while(element)...{
               y += element.offsetTop;
               element = element.offsetParent;
           }
           return y;
       },
      
       _image_OnMouseOver : function(args) ...{        
          switch(args.target.id) ...{
               case "0-0":
                   this._dataPanel.innerText = "This is the first image.";
                  break;
              case "0-1":
                  this._dataPanel.innerText = "This is the second image.";
                   break;
          }        
           this._dataPanel.style.left = this._getXCoord(args.target) + args.target.offsetWidth + "px";
           this._dataPanel.style.top = this._getYCoord(args.target) + "px";
          this._dataPanel.style.display = "block";
       },
       
      _image_Out : function(args) ...{
           this._dataPanel.style.display = "none";
       },
       
       initialize : function() ...{
           Test.Main.callBaseMethod(this, "initialize");                
           
           var image = null;        
           
           this._dataPanel = $get("DataPanel");   
           
           this._imageMouseOverHandler = Function.createDelegate(this, this._image_OnMouseOver);
          this._imageMouseOutHandler = Function.createDelegate(this, this._image_Out);
           
           for(var i = 0; i < this._rows; i++)
               for(var j = 0; j < this._columns; j++) ...{
                  image = $get(i + "-" + j);
                $addHandler(image, "mouseover", this._imageMouseOverHandler);
                   $addHandler(image, "mouseout", this._imageMouseOutHandler);
               }
       }
   }
  Test.Main.registerClass("Test.Main", Sys.Component);
   
   function pageLoad() ...{
      main = new Test.Main(1, 2);
      main.initialize();
  }
   </ script >
   </ html >

 

3、随便copy 图片Image1.gif 和Image2.gif 放在application根目录下。核心功能就算完成了，可以根据

需要改进！