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 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    drag and position image

    I need help with the following, it's the idea that people visiting my site can drag an small image, over a larger image, and when a submit button is pressed the x-y coordinate of the small image has to be submitted to a cgi script. After several hours surfing on the net I found a good 'drag' script, though I don't know how to build the small image within a bigger (background) image, the smaller image must stay within the boundries of the bigger image. I also need help fetching the x-y position so that I can pass it to the cgi script. I'm not really good at javascript, so I need all the help I can get. Thanks in advance.

    Ps. I've enclosed the .js file with this posting.


    <body>
    <script type="text/javascript" src="e:\drag\wz_dragdrop.js"></script>

    <img name="part" src="c:\ms-windows_logo.jpeg" alt="">

    <script type="text/javascript">
    <!--
    SET_DHTML("part", "name2", "anotherLayer", "lastImage");
    //-->
    </script>

    </body>
    Attached Files Attached Files

  • #2
    New Coder
    Join Date
    Apr 2006
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone ?

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    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
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    </head>
    
    <body>
    <div style="position:relative;left:0px;top:0px;width:500px;height:400px;" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=500 height=400 >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width=50 height=40
    style="position:absolute;left:0px;top:0px;"
     onmousedown="zxcMseDown(event,this)">
    </div>
    
    <script language="JavaScript" type="text/javascript">
    <!--
    var zxcObj;
    var zxcEvt=0;
    
    function zxcMseDown(event,zxcobj) {
     if (zxcObj){ return; }
     document.onselectstart=function(event){window.event.returnValue=false; }
     zxcObj=zxcobj;
     zxcp=zxcObj.parentNode;
     zxcObj.pos=[parseInt(zxcObj.style.left),parseInt(zxcObj.style.top),zxcp.offsetWidth-zxcObj.offsetWidth,zxcp.offsetHeight-zxcObj.offsetHeight];
     zxcObj.osx=zxcMse(event)[0]-zxcObj.offsetLeft-zxcPos(zxcp)[0];
     zxcObj.osy=zxcMse(event)[1]-zxcObj.offsetTop-zxcPos(zxcp)[1];
     zxcAddEvt(zxcObj,'zxcMseUp','mouseout');
    }
    
    function zxcDrag(event){
     if (!zxcObj){ return; }
     zxcObj.pos[0]=(zxcMse(event)[0]-zxcObj.osx);
     zxcObj.pos[1]=(zxcMse(event)[1]-zxcObj.osy);
     if (zxcObj.pos[0]>=0&&zxcObj.pos[0]<=zxcObj.pos[2]&&zxcObj.pos[1]>=0&&zxcObj.pos[1]<=zxcObj.pos[3]){
      zxcObj.style.left=(zxcObj.pos[0])+'px';
      zxcObj.style.top=(zxcObj.pos[1])+'px';
     }
    }
    
    
    function zxcMseUp(){
     document.onselectstart=null;
     zxcObj=null;
    }
    
    function zxcMse(event){
     if(!event) var event=window.event;
     if (document.all){ return [event.clientX+zxcDocS()[0],event.clientY+zxcDocS()[1]]; }
     else { return[event.pageX,zxcMseY=event.pageY]; }
    }
    
    function zxcDocS(){
     var zxcsx,zxcsy;
     if (!document.body.scrollTop){ zxcsx=document.documentElement.scrollLeft; zxcsy=document.documentElement.scrollTop; }
     else { zxcsx=document.body.scrollLeft; zxcsy=document.body.scrollTop; }
     return [zxcsx,zxcsy];
    }
    
    function zxcEventObj(zxce){
     if (!zxce) var zxce=window.event;
     if (zxce.target) zxceobj=zxce.target;
     else if (zxce.srcElement) zxceobj=zxce.srcElement;
     if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
     return zxceobj;
    }
    
    function zxcPos(zxc){
     zxcObjLeft = zxc.offsetLeft;
     zxcObjTop = zxc.offsetTop;
     while(zxc.offsetParent!=null){
      zxcObjParent=zxc.offsetParent;
      zxcObjLeft+=zxcObjParent.offsetLeft;
      zxcObjTop+=zxcObjParent.offsetTop;
      zxc=zxcObjParent;
     }
     return [zxcObjLeft,zxcObjTop];
    }
    
    
    function zxcEventAdd(zxco,zxct,zxcf){
     if (zxco.addEventListener){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
     else if (zxco.attachEvent){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
     else {
      var zxcPrev=zxco['on'+zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    function zxcAddEvt(zxcobj,zxcfun,zxcevt){
     if (zxcobj[zxcevt+'add']){ return; }
     zxcobj['zxcaddEvt'+zxcEvt]=window[zxcfun];
     zxcobj[zxcevt+'add']=true;
     zxcEventAdd(zxcobj,zxcevt,'zxcaddEvt'+zxcEvt);
     zxcEvt++;
    }
    
    zxcAddEvt(document,'zxcDrag','mousemove');
    zxcAddEvt(document,'zxcMseUp','mouseup');
    
    //-->
    </script>
    </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/


  •  

    Posting Permissions

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