This example shows how to show a bigger Image when the mouse is hover into the original image.

The trick here is we are just getting the path of the original image and set the actual size to a bigger size then display it in another Div. Check the code blocks below for your reference.

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Untitled Page</title>
    <script type="text/javascript" language="ecmascript">
        function ShowBiggerImage(obj) 
        {
            document.getElementById("LargeImageContainerDiv").innerHTML = "<img src='" + obj.src + "'+'width=150 height=200' >";
        }

        function ShowDefaultImage(obj) 
        {
            document.getElementById("LargeImageContainerDiv").innerHTML = "";
        }

        function move_Area(event)
        {
         event = event || window.event;
LargeImageContainerDiv.style.left=event.clientX+document.body.scrollLeft+10;
LargeImageContainerDiv.style.top=event.clientY+document.body.scrollTop+10;
        }

        document.onmousemove = move_Area;
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Image ID="Image1" runat="server" Width="60px" Height="80px"
                 ImageUrl="~/Images/FretsOnFire.jpg"
                 onmouseover="ShowBiggerImage(this);"
                 onmouseout="ShowDefaultImage(this);"/>
        </div>
        <div id="LargeImageContainerDiv" style="position: absolute; z-index:2">  
        </div>
    </form>
</body>
</html>

The page output would look something like below:



That's it! Hope you will find this example useful!

 

Technorati Tags: ,,