在浏览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根目录下。核心功能就算完成了，可以根据
需要改进！