[ASP.NET] 當滑鼠移動到Button上時顯示訊息

2012-05-30

3480
0
ASP.NET

摘要:[ASP.NET] 當滑鼠移動到Button上時顯示訊息

問題 : 有時候會需要在按下Button之前，顯示一些訊息在Button上，讓使用者知道這個Button下包含哪些資料

雖然Button中已有類似的屬性 : ToolTip，但如果要有更多的變化就必須自己動手了...^^"

經過前輩指導，找到答案

.aspx檔


<%@ Page Language="VB"   EnableEventValidation ="false" EnableViewState ="false" AutoEventWireup="false" CodeFile="main.aspx.vb" Inherits="main" %> 


<html>
     <head runat="server">
		<meta http-equiv="Content-Type" content="text/html; charset=big5" />
		<style type="text/css">
		    .BoxCase {position:absolute;left:-800px;top:-600px;width:265px;height:150px;visibility:hidden;z-index:1;}
			.BoxCase {border:solid 2px outset;text-align:left;padding:6px;background:#e8e4dc;color:#008000;}
			.BoxCase {font-family:標楷體;font-size:16px;line-height:17px;letter-spacing:2px;}
		</style>
		<script language="javascript" type="text/javascript" src="common.js" ></script>
		<script language="javascript" type="text/javascript" >
            function ShowNote(n) {
            eval('Note' + n + '.style.left=(event.clientX+10)');
            eval('Note' + n + '.style.top =(event.clientY+10)');
            eval('Note' + n + '.style.visibility="visible"');
            eval('Note' + n + '.style.height=100');}
            function HideNote(n) {
            eval('Note' + n + '.style.visibility="hidden"');
            }
            </script>
     </head>
        <body>     
    	  <form id="main" runat="server">
			<table width="100%" height="100%" border="0" >   
                      <tr>  
                   <td align="center"> 
                   	  <asp:Button id="test1" onmouseover="ShowNote('1')" onmouseout="HideNote('1')" runat="server" Text="測試1" class="x14" Height="40px" Width="100px" />
                                   
                      <asp:Button id="test2"  onmouseover="ShowNote('2')" onmouseout="HideNote('2')" runat="server" Text="測試2" CssClass="x14" Height="40px" Width="100px" />
                         
                      <asp:Button id="test3"  onmouseover="ShowNote('3')" onmouseout="HideNote('3')" runat="server" Text="測試3" class="x14" Height="40px" Width="100px" />
                        
                      <asp:Button id="test4"  onmouseover="ShowNote('4')" onmouseout="HideNote('4')" runat="server" Text="測試4" class="x14" Height="40px" Width="100px" />
                   </td>
              </tr>
        </table>
		    <div id="Note1" class="BoxCase">  測試1的內容 </div>
            <div id="Note2" class="BoxCase">  測試2的內容 </div>
            <div id="Note3" class="BoxCase">  測試3的內容 </div>
            <div id="Note4" class="BoxCase">  測試4的內容 </div>
        </form> 		

  </body>
</html>

ASP.NET

回首頁