Show Large Image on MouseOver using JavaScript in asp.net

Generally when a website displays images on the page, the use may think to see big image without clicking on the actual image. To achieve this the following example may help you ....

Place this java script in the header tag
<script type="text/javascript" language="ecmascript">
        function SBImage(obj)
        {
            document.getElementById("previewDiv").innerHTML = "<img src='" + obj.src + "'+'width=150 height=200' >";
        }
        function SDImage(obj)
        {
            document.getElementById("previewDiv").innerHTML = "";
        }
        function move_Area(event)
        {
            event = event || window.event;
            previewDiv.style.left=event.clientX+document.body.scrollLeft+10;
            previewDiv.style.top=event.clientY+document.body.scrollTop+10;
        }
        document.onmousemove = move_Area;
    </script>

Now place this code in your body tag

<div>
    <asp:Image ID="Image1" runat="server" Width="100px" Height="100px"
                 ImageUrl="~/fru39d.jpg"
                 onmouseover="SBImage(this);"
                 onmouseout="SDImage(this);"/>
    <asp:Image ID="Image2" runat="server" Width="100px" Height="100px"
                 ImageUrl="~/mus3h.jpg"
                 onmouseover="SBImage(this);"
                 onmouseout="SDImage(this);"/>
    </div>
    <div id="previewDiv" style="position: absolute; z-index:2"> 
        </div>