Vinz' Blog

"Code, Beer and Music" ~ my way of being a programmer!
posts - 124, comments - 367, trackbacks - 0

My Links

News

Archives

Image Galleries

FAQ: Show Large Image on MouseOver using JavaScript

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 a better look.


<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!

Print | posted on Thursday, May 07, 2009 4:49 PM |

Feedback

Gravatar

# re: FAQ: Show Large Image on MouseOver using JavaScript


js function works fine, my requirement is ,think that sequence of images(horizontal) in the screen. when hovering the last image the half of large image hides in the screen, can you say how acheive this one.
5/27/2009 4:53 AM | senthilkumar.k
Gravatar

# re: FAQ: Show Large Image on MouseOver using JavaScript

Thanks it works
8/4/2009 12:08 AM | Dhanashri
Post A Comment
Title:
Name:
Email:
Website:
Comment:
Verification:
 
 

Powered by: