Geeks With Blogs

News

Microsoft MVP


Moderator at CodeASP.NET


Quiz Master




free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.


Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

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: ,,
Posted on Thursday, May 7, 2009 4:49 PM ASP.NET , JavaScript , Tips&Tricks | Back to top


Comments on this post: FAQ: Show Large Image on MouseOver using JavaScript

# re: FAQ: Show Large Image on MouseOver using JavaScript
Requesting Gravatar...

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.
Left by senthilkumar.k on May 27, 2009 4:53 AM

# re: FAQ: Show Large Image on MouseOver using JavaScript
Requesting Gravatar...
Thanks it works
Left by Dhanashri on Aug 04, 2009 12:08 AM

# re: FAQ: Show Large Image on MouseOver using JavaScript
Requesting Gravatar...
Thanks Its working fine for me
Left by Amol on Jan 28, 2010 10:40 PM

# re: FAQ: Show Large Image on MouseOver using JavaScript
Requesting Gravatar...
the "LargeImageContainerDiv" does not move with the mouse pointer when run in firefox.how to fix that ?
Left by Priyank on Feb 02, 2010 12:55 PM

# re: FAQ: Show Large Image on MouseOver using JavaScript
Requesting Gravatar...
but it does not work in firefox properly
Left by eswaran on Feb 22, 2010 8:24 PM

# re: FAQ: Show Large Image on MouseOver using JavaScript
Requesting Gravatar...
how can I USE THIS code in page.aspx wich is related to master page ?!!
Left by sh on Mar 02, 2010 5:16 AM

# re: FAQ: Show Large Image on MouseOver using JavaScript
Requesting Gravatar...
not working
Left by suresh on May 29, 2010 6:33 PM

# re: FAQ: Show Large Image on MouseOver using JavaScript
Requesting Gravatar...
Jst ad px behing the
LargeImageContainerDiv.style.left=event.clientX+document.body.scrollLeft+10+"px"; LargeImageContainerDiv.style.top=event.clientY+document.body.scrollTop+10+"px";
Left by Jay Gajjar on Jun 12, 2010 1:38 AM

# re: FAQ: Show Large Image on MouseOver using JavaScript
Requesting Gravatar...
I am trying to integrate the mouseover function into a preexisting carousel (which is another javascript code: jcarousel).

Basically the jcarousel allows a strip of horizontally scrolling images (that is looped) and I would like to add something that allows an enlarged version of the images on mouseover of the thumbnails.

When I use the mouseover code alone it works, and the jcarousel alone also works, but when I add the mouseover code into thumbnail images that's inside the jcarousel it doesn't work.

I just want to make a horizontally scrolling strip of images that allows an enlarged image on mouseover, if anyone knows a script like that or knows how to solve the jcarousel problem, please help me.

Thank you very much.
Left by Yi Yu on Jul 21, 2010 2:44 AM

# re: FAQ: Show Large Image on MouseOver using JavaScript
Requesting Gravatar...
Thank a lot.
Left by ketsarin on Aug 16, 2010 5:20 PM

# re: FAQ: Show Large Image on MouseOver using JavaScript
Requesting Gravatar...
Really Thx for this
Left by siddhartha on Sep 23, 2010 1:18 PM

# re: FAQ: Show Large Image on MouseOver using JavaScript
Requesting Gravatar...
its working fine,
thanks a lot
Left by prasath on Oct 19, 2010 5:36 PM

# re: FAQ: Show Large Image on MouseOver using JavaScript
Requesting Gravatar...
It Is Not Working Ya.....
Left by karthik on Jan 22, 2011 3:30 PM

# re: FAQ: Show Large Image on MouseOver using JavaScript
Requesting Gravatar...
Thanks a lot. You saved my day.
Left by Joy on Jan 23, 2011 3:20 PM

# re: FAQ: Show Large Image on MouseOver using JavaScript
Requesting Gravatar...
@karthik,
What exactly do you mean by "not working"?
Left by Vinz on Jan 23, 2011 6:04 PM

# re: FAQ: Show Large Image on MouseOver using JavaScript
Requesting Gravatar...
it's nt working in mozilla firefox 5.0 or older version of mozilla firefox.. & in internet explorer it is showing javascript error that LargeImageContainerDiv is undefined.... pls help
Left by Nirav on Jun 30, 2011 7:36 PM

# re: FAQ: Show Large Image on MouseOver using JavaScript
Requesting Gravatar...
Its not wokring. or not sure i am missing anything. i am using it for DNN
Left by sandeep on Jul 16, 2011 2:33 AM

# re: FAQ: Show Large Image on MouseOver using JavaScript
Requesting Gravatar...
Thank you very much :D
Left by Hoshang on Oct 26, 2011 5:00 PM

# re: FAQ: Show Large Image on MouseOver using JavaScript
Requesting Gravatar...
nica tnx
Left by dheeraj on Jan 17, 2012 7:36 PM

# re: FAQ: Show Large Image on MouseOver using JavaScript
Requesting Gravatar...
Hi,

It worked just fine.

But do I make it to work on an image whose source is from the databse (eg sqlserver)

Thank u.
Left by Emma on Apr 16, 2012 9:55 PM

# re: FAQ: Show Large Image on MouseOver using JavaScript
Requesting Gravatar...
Hi,

It worked just fine.

But do I make it to work on an image whose source is from the databse (eg sqlserver)

Thank u.
Left by Emma on Apr 16, 2012 9:55 PM

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net | Join free