Catching onmouse over and out events with an image upload button.

Last post 04-12-2011, 5:02 AM by Kenneth. 1 replies.
Sort Posts: Previous Next
  •  03-24-2011, 10:38 AM 66835

    Catching onmouse over and out events with an image upload button.

    Hi,
     
    I'm unable to catch any events when i'm using an image based upload button (based on your example: Customizing the UI)
    I simply want to change the mousepointer to hand and make a glow around the upload button (like in figure 1), with the onmouseover event and reset it with onmouseout, it works fine with my scanner and camera buttons.
     
    Fig. 1.
     
    Any idears?
     
    BR
    Jsfarum
     
     
  •  04-12-2011, 5:02 AM 67123 in reply to 66835

    Re: Catching onmouse over and out events with an image upload button.

    Hi jsfarum,
     
    Please try the example below. It shows you how to catch the mouseover and mouseout event. And change the mouse to 'hand'.
     
    1. <%@ Page Language="C#" %>  
    2.   
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    4. <html xmlns="http://www.w3.org/1999/xhtml">  
    5. <head id="Head1" runat="server">  
    6.     <title>example</title>  
    7. </head>  
    8. <body>  
    9.     <form runat="server">  
    10.         <asp:Image runat="server" ID="Uploader1Insert" AlternateText="Upload File" ImageUrl="~/sampleimages/upload.png"  
    11.             onmouseover="showMessage()" />  
    12.         <CuteWebUI:UploadAttachments ID="Attachment1" runat="server" InsertButtonID="Uploader1Insert">  
    13.         </CuteWebUI:UploadAttachments>  
    14.   
    15.     </form>  
    16. </body>  
    17. </html>  
    18.   
    19. <script type="text/javascript">  
    20. function showMessage()  
    21. {  
    22. //only for IFrame mode here  
    23. //If user have not install flash playr and silverlight will fire  
    24. }  
    25. function CuteWebUI_AjaxUploader_OnMantleButton(btn,div)  
    26. {  
    27. // for flash and silverlight mode here  
    28.     div.onmouseover=function()  
    29.     {  
    30.         //  
    31.         div.style.cursor='pointer';  
    32.         alert("over");  
    33.     }  
    34.     div.onmouseout=function()  
    35.     {  
    36.         alert("out");  
    37.     }  
    38. }  
    39.   
    40. </script> 
    Regards,
     
    Ken
View as RSS news feed in XML