while the page data is retrieved.to achieve this the
best way is to use ajax.here i am going to show how
to that using jquery ajax in asp.net page.jquery made
things simpler and organized.
the follwing codes shows the codes to show data
from a page when mouse is over a button or anything.
also you will see the progress image while the
data from a aspx page is retrieved.then if you
put your mouse away from the button the data
will be vanished.you have seen this type of
behaviour in many places like when you place
mouse over a help link,the help data is displayed.
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript"
src="Script/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#txt").ajaxStart(function(){
$("#loading").css("display","block");
});
$("#txt").ajaxComplete(function(){
$("#loading").css("display","none");
});
$("#cc").mouseover(function(){
$("#txt").load("test.aspx");
});
$("#cc").mouseout(function(){
$("#txt").load("test2.aspx");
});
});
</script></head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="s1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="u1" runat="server">
<ContentTemplate>
<div id="test" style="margin-top:200px;">
<div id="txt">data will be shown here</div>
<%--<button id="bb">Change Content1</button--%>
<asp:Button ID="cc" Height="30px" runat="server"
Text="change content2" />
<div id="loading" style="display:none;width:70px;
height:80px;position:absolute;top:50%;left:50%;
padding:2px;"><img src='images/LoadAnimation.png'
width="64" height="64" /><br />Loading..</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form></body></html>
there are many ways to that