Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET Javascript CSS
How to zoom the image on mouseover of image with popup div containg enlarged image.
 
i tried following working in ie8 but not in firefox.mouseover is not raising in firefox.
 
<script language="javascript" type="text/javascript">
    function getElementLeft(elm) {
        var x = 0;
 
        //set x to elm’s offsetLeft
        x = elm.offsetLeft;
 
        //set elm to its offsetParent
        elm = elm.offsetParent;
 
        //use while loop to check if elm is null
        // if not then add current elm’s offsetLeft to x
        //offsetTop to y and set elm to its offsetParent

        while (elm != null) {
            x = parseInt(x) + parseInt(elm.offsetLeft);
            elm = elm.offsetParent;
        }
        return x;
    }
 
    function getElementTop(elm) {
        var y = 0;
 
        //set x to elm’s offsetLeft
        y = elm.offsetTop;
 
        //set elm to its offsetParent
        elm = elm.offsetParent;
 
        //use while loop to check if elm is null
        // if not then add current elm’s offsetLeft to x
        //offsetTop to y and set elm to its offsetParent

        while (elm != null) {
            y = parseInt(y) + parseInt(elm.offsetTop);
            elm = elm.offsetParent;
        }
 
        return y;
    }
 
    function Large(obj) {
        var imgbox = document.getElementById("imgbox");
        imgbox.style.visibility = 'visible';
        var img = document.createElement("img");
        img.src = document.getElementById(obj.id + "img").src;// obj.firstChild.src; // obj.src;
        img.style.width = '500px';
        img.style.height = '400px';
 
        if (img.addEventListener) {
            img.addEventListener('mouseout', Out, false);
        } else {
            img.attachEvent('onmouseout', Out);
        }
        imgbox.innerHTML = '';
        imgbox.appendChild(img);
        imgbox.style.left = (getElementLeft(obj) - 50) + 'px';
        imgbox.style.top = (getElementTop(obj) - 50) + 'px';
    }
 

    function Out() {
        document.getElementById("imgbox").style.visibility = 'hidden';
    }
 

</script>
 
thanks,
Posted 3-Feb-12 4:00am
Edited 3-Feb-12 4:17am
v2
Comments
Anuja Pawar Indore at 3-Feb-12 9:18am
   
Added pre tag
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

I advise you to use jQuery[^] for cross browser compatability[^] and this plugin I found: jQZoom[^].
 
That plugin looks quite nice, so give it a try!
 
Regards,
 
Manfred
  Permalink  
v2
Comments
molugu sanjana at 9-Mar-12 8:35am
   
hai my name is bhargav i need your help if u had code for update for gridview where columns had shown vertically and the error is (out of range) will u plz........... my mail (bhargav1709@gmail.com)
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

Hi,
 
Manfred already wrote good advice to you. Because you will get into trouble with browser compatibility, the best thing to do is to find some working solution based on jquery,mootools, prototype or any other js framework available out there...
Look here maybe you find solution that will fit your needs:
1. http://jsfiddle.net/jquerybyexample/nPeaV/[^]
2. how-to-zoom-image-on-mouse-over-using.html[^]
3. zoomimage[^]
4. jquery_zoom_hover/[^]
5. jquery-image-zoom[^]
6. jquery-zoom[^]
7. ... for more use google Smile | :)
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



Advertise | Privacy | Mobile
Web04 | 2.8.1411023.1 | Last Updated 3 Feb 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100