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
  1. #1
    New Coder
    Join Date
    Jan 2004
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Script on this??

    Hi,
    I had recently posted a query on this issue and I received replies in pertinent to this and I am very grateful for that. But I tried a lot and I could not get to the solution.

    I need to know as to where can I find a script similar to this issue

    Issue:- Link: http://www21.brinkster.com/sashwin/survey/test1.html

    The user will be moving and placing the Home Image button on the browser.gif image. I need to know the position the user placed the image button on the browser.gif file (position in respect to the browser.gif image and not to the IE browser). I was able to find the coordinates when the user clicks on the browser.gif image but I wasn't able to find out the position of the image when the user moves it on the browser.gif image file.

    Thank you.

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Do you mean something like this?



    <HTML>
    <HEAD>
    <TITLE>Online Survey</TITLE>

    <STYLE>
    .drag {BORDER-RIGHT: #000000 0px solid; BORDER-TOP: #000000 0px solid; FILTER: progid:DXImageTransform.Microsoft.Matrix(sizingmethod='auto expand'); BORDER-LEFT: #000000 0px solid; BORDER-BOTTOM: #000000 0px solid}
    .thisclass {BACKGROUND-COLOR: gray}
    .pic {POSITION: relative}
    </STYLE>

    <SCRIPT language=JAVASCRIPT type=TEXT/JAVASCRIPT>

    moving = false;
    active = null;

    function showXY(e,container) {
    if (document.all) {
    e = window.event;
    if (e.srcElement.parentElement == container) {
    status = ' LEFT: ' + e.offsetX + ' TOP: ' + e.offsetY;
    } else {
    status = '';
    }
    } else if (document.layers) {
    if (e.target.name == this.id) {
    status = ' LEFT: ' + (e.layerX-e.target.x) + ' TOP: ' + (e.layerY-e.target.y);
    }
    }
    return false;
    }

    function Drag(){
    if(event.srcElement.className!="drag") return;
    moving=true;
    obj=event.srcElement;
    X_offset=event.clientX-event.srcElement.style.pixelLeft;
    Y_offset=event.clientY-event.srcElement.style.pixelTop;
    event.srcElement.style.zIndex = (active?active.style.zIndex+1:1)
    active = event.srcElement;
    document.onmousemove=Moveto;
    }

    function Moveto(){
    if(!moving) return true;
    if(event.button!=1) return true;
    obj.style.pixelLeft=event.clientX-X_offset;
    obj.style.pixelTop=event.clientY-Y_offset;


    form_left=document.getElementById("img1").offsetLeft
    image_left=document.getElementById("myimg").offsetLeft
    document.getElementById("div1").innerHTML=obj.style.pixelLeft-image_left-form_left

    form_top=document.getElementById("img1").offsetTop
    image_top=document.getElementById("myimg").offsetTop

    document.getElementById("div2").innerHTML=obj.style.pixelTop-image_top-form_top

    return false;
    }

    document.onmouseup=new Function("moving=false");
    angle=new Array()
    angle[0]=0

    function init(){
    if (document.layers) {
    document.captureEvents(Event.MOUSEDOWN);
    document.onmousedown = function(e){if(e.target!=document){document.routeEvent(e)}else{status=''}};
    document['img1'].captureEvents(Event.MOUSEDOWN);
    document['img1'].onmousedown = showXY;
    } else {
    document.onmousedown = showXY;
    }
    }

    j=1

    function setvalues(id,num){
    ID=id
    i=num
    j=0
    }
    </SCRIPT>

    </HEAD>
    <BODY bgColor=#a9a9a9 onload="init()">

    <FORM class=pic id="img1" style="LEFT: 110px; POSITION: absolute; TOP: 140px" onclick=showXY(null,this)>
    <IMG style="POSITION:absolute; LEFT: 0px; TOP: 0px" src="Online Survey_files/browser.jpg" name=img1 id="myimg">
    </FORM>

    <FORM>
    <IMG class=drag onmousedown=Drag();setvalues(image1,1) style="LEFT: 50px; POSITION: absolute; TOP: 100px"
    src="Online Survey_files/home.gif" name=image1>
    </FORM>

    <div id="div1"></div>
    <div id="div2"></div>

    </BODY>
    </HTML>


  • #3
    New Coder
    Join Date
    Jan 2004
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes exactly. Thanks a million my friend. I was struck in the middle. Now my last question. There will be a Submit button down the page and when the user clicks on the Submit button the user will be taken to a PHP page which indicates "Thank you for your time" and data will be stored in a MySql database file. So I need to store these values and then send these values to a script and in turn to a database. I have thought about it like this.

    function putPositions() {
    // get the position / rotation data
    // suppose you store them in posX, posY, etc.
    document.myform.posx.value = posX; (I thought this earlier)
    document.myform.posy.value = posT;
    return true;
    }

    <form name="myform" action="whatever.php" onsubmit="putPositions();">
    <input name="posx" type="hidden">
    <input name="posy" type="hidden">
    <input type="submit" value="Now thank me for my time!">
    </form

    Will this work out. How do I go about in storing the values in the code which you written. Thanks a lot for your time. I appreciate you help.


  •  

    Posting Permissions

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