How to view the image while mouse hover using JQUERY in Asp.net C#

How to view the image while mouse hover using JQUERY in Asp.net C#

Step1:- Create one HTML design in the ASPX page

<div id="pop1" class="popbox">

   <asp:Image ID="imghover" runat="server" Width="800px" Height="400px" />

</div>

<a href="#" class="popper" data-popbox="pop1" id="hrfViewImage" runat="server" visible="false">View Image</a>

To assign the Image URL in code View use run at server for HTML Control

Step2:- Assign the image URL in Code View

imghover.ImageUrl = "../Images/Sample.jpg ";

Step3:- Use latest JQUERY reference

Write this code in script area

<script type="text/javascript">

       

        function pageLoad() {

              hoverImageLoad();

        }

       

        function hoverImageLoad() {

            var moveLeft = 0;

            var moveDown = 0;

            $('a.popper').hover(function (e) {

                var target = '#' + ($(this).attr('data-popbox'));

                $(target).show();

                moveLeft = $(this).outerWidth();

                moveDown = ($(target).outerHeight() / 2);

            }, function () {

                var target = '#' + ($(this).attr('data-popbox'));

                if (!($("a.popper").hasClass("show"))) {

                    $(target).hide();

                }

            });

            $('a.popper').mousemove(function (e) {

                var target = '#' + ($(this).attr('data-popbox'));

                leftD = e.pageX + parseInt(moveLeft);

                maxRight = leftD + $(target).outerWidth();

                windowLeft = $(window).width() - 40;

                windowRight = 0;

                maxLeft = e.pageX - (parseInt(moveLeft) + $(target).outerWidth() + 20);

                if (maxRight > windowLeft && maxLeft > windowRight) {

                    leftD = maxLeft;

                }

                topD = e.pageY - parseInt(moveDown);

                maxBottom = parseInt(e.pageY + parseInt(moveDown) + 20);

                windowBottom = parseInt(parseInt($(document).scrollTop()) + parseInt($(window).height()));

                maxTop = topD;

                windowTop = parseInt($(document).scrollTop());

                if (maxBottom > windowBottom) {

                    topD = windowBottom - $(target).outerHeight() - 20;

                } else if (maxTop < windowTop) {

                    topD = windowTop + 20;

                }

                $(target).css('top', topD).css('left', leftD);

            });

            $('a.popper').click(function (e) {

                var target = '#' + ($(this).attr('data-popbox'));

                if (!($(this).hasClass("show"))) {

                    $(target).show();

                }

                $(this).toggleClass("show");

            });

        }

        //$(document).ready(function () {

        //    hoverImageLoad();

        //});

    </script>

Run the page and check the image view.