Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: map zooming

  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    map zooming

    Hello everybody,

    I need to write a javascript program that shows a map (.png image) on the web, and when the mouse moves over the map, it zooms the area around the pointer. (the zoomed part comes from a high resolution large image which actually should be cropped in order not to be larger than certain size.)

    I am a newbie in javascipt, and I have learned some, but still I have no idea how to create a such script. Do I need something extra like CSS, JQuery? I have no experience in web programming, so any help would be much appreciated.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    
    <style type="text/css">
    /*<![CDATA[*/
    
    .tstparent {
      position:relative;overflow:hidden;left:100px;top:100px;width:400px;height:300px;border:solid red 1px;
    }
    
    #tst {
      position:relative;left:0px;top:0px;width:400px;height:300px;
    }
    
    .window {
      width:100px;height:75px;border:solid red 1px;
    }
    
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Zoom Image (28-August-2011)
    // by Vic Phillips http://www.vicsjavascripts.org.uk/
    
    
    function zxcZoomImage(o){
     var img=document.getElementById(o.ID),obj=img.parentNode,window=document.createElement('DIV'),zimg=document.createElement('IMG'),src=o.ZoomSRC,zoom=o.Zoom,zoom=typeof(zoom)=='number'?zoom:2,os=o.ZoomWindowOffset;
     window.style.position='absolute';
     window.style.overflow='hidden';
     window.style.visibility='hidden';
     window.style.zIndex='2';
     window.className=o.WindowClassName;
     zimg.style.position='absolute';
     zimg.style.width=img.width*zoom+'px';
     zimg.style.height=img.height*zoom+'px';
     zimg.src=typeof(src)=='string'?src:img.src;
     window.appendChild(zimg);
     obj.appendChild(window);
     this.window=window;
     this.zimg=zimg;
     this.wh=[obj.offsetWidth,obj.offsetHeight];
     this.zoom=zoom;
     this.os=typeof(os)=='object'&&os.constructor==Array&&typeof(os[0])=='number'&&typeof(os[1])=='number'?os:[-window.offsetWidth/2,-window.offsetHeight/2];
     this.wos=[-window.offsetWidth/2,-window.offsetHeight/2];
     this.addevt(document,'mousemove','imgzoom',obj);
    }
    
    zxcZoomImage.prototype={
    
     imgzoom:function(e,obj){
      var mse=this.mse(e),pos=this.pos(obj),x=mse[0]-pos[0],y=mse[1]-pos[1],wh=this.wh,os=this.os,wos=this.wos,window=this.window,zimg=this.zimg,zoom=this.zoom;
      if (x>0&&x<wh[0]&&y>0&&y<wh[1]){
       x+=os[0];
       y+=os[1];
       window.style.left=x+'px';
       window.style.top=y+'px';
       zimg.style.left=-x*zoom+wos[0]+'px';
       zimg.style.top=-y*zoom+wos[0]+'px';
       window.style.visibility='visible';
      }
      else {
       window.style.visibility='hidden';
      }
     },
    
     mse:function(e){
      if (window.event){
       var docs=[document.body.scrollLeft,document.body.scrollTop];
       if (!document.body.scrollTop){
        docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
       }
       return [e.clientX+docs[0],e.clientY+docs[1]];
      }
      return [e.pageX,e.pageY];
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     }
    
    }
    
    /*]]>*/
    </script>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
    
    new zxcZoomImage({
     ID:'tst',                                                         // the unique ID name of the image to zoom.                           (string)
     WindowClassName:'window',                                         // the class name of the zoom window DIV element.                     (string)
     Zoom:2,                                                           //(optional) the zoom factor.                                         (number, default = 2)
     ZoomSRC:'http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg', //(optional) the file path and name of the zoom image.                (string, defaule = the src of the image to zoom)
     ZoomWindowOffset:[0,-75]                                          //(optional) the zoom window x and y offsets from the mouse position. (array, default = centered on the mouse position)
    });
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    
    </head>
    
    <body>
    
     <div class="tstparent" >
      <img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
     </div>
    
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is amazing! Honestly I wasn't expecting that much help. Thanks a lot for your time vwphillips.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •