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 5 of 5
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    29
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Zoom in/out function on JPGS?

    Hi,

    I recently uploaded an interactive map which, for the most part, I'm happy with. However, I would like to add a zoom in/out function to the map; for example, when the mouse is scrolled the jpg zooms out.


    What exactly would be the code for that? Thanks


    Map can be viewed BY CLICKING HERE.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,016
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    http://www.javascriptkit.com/script/...magezoom.shtml

    http://www.vicsjavascripts.org.uk/Im...?1337680202408



    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 05-22-2012 at 10:51 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    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[*/
    
    .box {
      position:relative;overflow:hidden;width:635px;height:503px;border:solid red 1px;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    // Pan Zoonm (22-May-2012)
    // by Vic Phillips http://www.vicsjavascripts.org.uk/
    
    var zxcPanZoom={
    
     init:function(o){
      var id=o.ID,img=document.getElementById(id),p=img.parentNode,obj;
      img.style.position='absolute';
      img.style.left=-o.startX+'px';
      img.style.top=-o.startY+'px';
      this[id]=obj={
       oop:this,
       id:id,
       img:img,
       pw:p.offsetWidth,
       ph:p.offsetHeight,
       xcord:document.getElementById(o.xcord),
       ycord:document.getElementById(o.ycord),
       mag:1,
       inc:typeof(o.zoomincrement)=='number'?o.zoomincrement:.1,
       zoommax:typeof(o.zoommax)=='number'?o.zoommax:2,
       drag:false
      }
      this.addevt(img,'mousedown','down',obj);
      this.addevt(img,'mousemove','move',obj);
      this.addevt(document,'mouseup','up',obj);
      this.addevt(p,'mouseover','wheel',obj);
      this.addevt(p,'mouseout','wheel',obj);
     },
    
     down:function(e,o){
      o.mse=[e.clientX,e.clientY];
      o.drag=true;
      this.wheel(e,o);
      this.rtn(e);
     },
    
     move:function(e,o){
      if (o.drag){
       var mse=[e.clientX,e.clientY],lft=parseInt(o.img.style.left),top=parseInt(o.img.style.top);
       o.img.style.left=Math.max(Math.min(lft+mse[0]-o.mse[0],0),-o.img.width+o.pw)+'px'
       o.img.style.top=Math.max(Math.min(top+mse[1]-o.mse[1],0),-o.img.height+o.ph)+'px'
       o.mse=mse;
       this.input(o);
      }
      this.rtn(e);
     },
    
     up:function(e,o){
      o.drag=false;
     },
    
     input:function(o){
      if (o.xcord&&o.ycord){
       o.xcord.value=parseInt(o.img.style.left);
       o.ycord.value=parseInt(o.img.style.top);
      }
     },
    
     Zoom:function(id,ud){
      var o=this[id]
      if (o&&typeof(ud)=='number'){
       var mag=Math.min(Math.max(o.mag+o.inc*(ud<0?-1:1),1),o.zoommax),w=o.img.width,h=o.img.height;
       o.img.style.left=(parseInt(o.img.style.left)-o.pw/2)/o.mag*mag+o.pw/2+'px';
       o.img.style.top=(parseInt(o.img.style.top)-o.ph/2)/o.mag*mag+o.ph/2+'px';
       o.img.style.width=w/o.mag*mag+'px'
       o.img.style.height=h/o.mag*mag+'px'
       o.mag=mag;
       this.input(o);
      }
     },
    
     GoTo:function(id,sel){
      var o=this[id],si=sel.options[sel.selectedIndex],lft=si.getAttribute('data-x'),top=si.getAttribute('data-y');
      if (o){
       if (isFinite(lft)&&isFinite(top)){
        o.img.style.left=lft*o.mag+'px';
        o.img.style.top=top*o.mag+'px';
        this.input(o);
       }
      }
     },
    
     wheel:function(e,o){
      if (window['zxcWheel']){
       zxcWheel.oop=e.type=='mouseout'?false:o;
      }
     },
    
     rtn:function(e){
      if(e.stopPropagation){
       e.stopPropagation();
      }
      if (!window.event){
       e.preventDefault();
      }
      e.cancelBubble=true;
      e.cancel=true;
      e.returnValue=false;
      return false;
     },
    
     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); });
     }
    
    }
    
    
    // Optional Mouse Wheel Code.
    function zxcWheel(e){
     e=e?e:window.event;
     if (zxcWheel.oop){
      var oop=zxcWheel.oop,ud=e.detail?e.detail>0?-1:1:e.wheelDelta/40>0?1:-1;
      oop.oop.Zoom(oop.id,ud);
      if(e.stopPropagation){
       e.stopPropagation();
      }
      if (!window.event){
       e.preventDefault();
      }
      e.cancelBubble=true;
      e.cancel=true;
      e.returnValue=false;
      return false;
     }
    }
    
    if(document.addEventListener) {
     document.addEventListener('DOMMouseScroll',zxcWheel,false);
     document.addEventListener('DOMMouseScroll',zxcWheel,false);
     document.addEventListener('mousewheel',zxcWheel,false);
     document.addEventListener('mousewheel',zxcWheel,false);
    }
    else if(document.attachEvent){
     document.attachEvent('onmousewheel',zxcWheel);
     document.attachEvent('onmousewheel',zxcWheel);
    }
    
    
    window.onload=function(){
    zxcPanZoom.init({
     ID:'worldMap',
     startX: 1820,
     startY: 1174,
     zoommax:4,
     zoomincrement:.1,
     xcord:'xcord',
     ycord:'ycord'
    });
    }
    
    /*]]>*/
    </script></head>
    
    <body>
    					                       <form>
                                X: <input type="text" id="xcord" readonly="readonly" /> Y: <input type="text" id="ycord" readonly="readonly" />
                                <select id="movecoords" onchange="zxcPanZoom.GoTo('worldMap',this);">
                                    <option value="Location Home">Choose a Location...</option>
                                    <option value="Al Kharid" data-x="-1963" data-y="-1385">Al Kharid</option>
                                    <option value="Ape Atoll" data-x="-957" data-y="-2097">Ape Atoll</option>
                                    <option value="Barbarian Outpost" data-x="-401" data-y="-531">Barbarian Outpost</option>
                                    <option value="Barbarian Village" data-x="-1544" data-y="-858">Barbarian Village</option>
                                </select>
    <input type="button" name="" value="Zoom +ve"  onmouseup="zxcPanZoom.Zoom('worldMap',1);"/>
    <input type="button" name="" value="Zoom -ve"  onmouseup="zxcPanZoom.Zoom('worldMap',-1);"/>
                           </form>
     <div class="box" >
      <img id="worldMap" src="http://testingwebsite1.net23.net/rmap.jpg" alt="WorldMap">
     </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/

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,346
    Thanks
    11
    Thanked 589 Times in 570 Posts
    Code:
    //on http://pastehtml.com/raw/byur0l5ld.html: 
    
    document.getElementById("worldMap").onmouseover=function(){
     var h=parseInt(this.height),
         w=parseInt(this.width),
         l=parseInt(this.style.left),
         t=parseInt(this.style.top);
    
     this.style.height=parseInt(h/2)+"px";
     this.style.width=parseInt(w/2)+"px";
     this.style.left=parseInt(l/2)+"px";
     this.style.top=parseInt(t/2)+"px";
    }
    
    
    document.getElementById("worldMap").onmouseout=function(){
     var h=parseInt(this.height),
         w=parseInt(this.width),
         l=parseInt(this.style.left),
         t=parseInt(this.style.top);
    
     this.style.height=parseInt(h/0.5)+"px";
     this.style.width=parseInt(w/0.5)+"px";
     this.style.left=parseInt(l/0.5)+"px";
     this.style.top=parseInt(t/0.5)+"px";
    }
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #5
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have a question like that, but in my case, I would like to zoom in and zoom out worked with a click and zoom that not only leave the center of the image but the location clicked by the user.
    Could anyone help me?

    thanks.


  •  

    Posting Permissions

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