Wednesday, November 6, 2013

image preview mouse over

protected void Page_Load(object sender, EventArgs e)
    {
         ImageButton1.Attributes.Add("onmouseover", "ShowImage('NewFolder1/desert.jpg');");
         ImageButton1.Attributes.Add("onmouseout", "HideImage();");
 
    }



<body>
    <form id="form1" runat="server">
    <asp:ImageButton ID="ImageButton1" ImageUrl ="~/NewFolder1/Lighthouse.jpg"   runat="server" Height="148px" Width="164px" />
    <img id="popupImage" src="Your image path goes here" alt="Popup image" style="display: none; width: auto; height: auto;"/>
        <br />
             
    </form>
    <script type="text/javascript">
        function ShowImage(src) {
            var img = document.getElementById('popupImage');
            img.src = src;
            img.style.display = "block";
        }
        function HideImage() {
            document.getElementById('popupImage').style.display = "none";
        }
</script>




</body>

No comments:

Post a Comment