Results 1 to 2 of 2

Thread: Use picture for calculating number of trencherman??

  1. #1
    Join Date
    Feb 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Use picture for calculating number of trencherman??

    Can any coder help me to solve this question?

    **if the yellow = 3, red = 5

    Thank you in advance for the helpers
    The following is my code, please check


    <html>
    <head>
    <title>Ajax Drag and Drop</title>

    <style type="text/css">
    #customer1{
    position:absolute;
    z-index:200;
    background: #FF0000;
    color:#0000FF;
    }

    #customer2{
    position:absolute;
    z-index:200;
    background: #FFF000;
    color:#0000FF;
    }

    #target {
    position:absolute;
    color:#000000;
    background-image:
    url(http://homesdesigns.net/wp-content/u...sign-Ideas.jpg)
    }
    </style>

    <script type="text/javascript">

    function SetValues()
    {
    var s = 'X=' + window.event.clientX + ' Y=' + window.event.clientY ;
    document.getElementById('divCoord').innerText = s;
    }

    var offsetX, offsetY;

    function MouseEvent(e)
    {
    if(e) {
    this.e = e;
    } else {
    this.e = window.event;
    }

    if(e.pageX) {
    this.x = e.pageX;
    } else {
    this.x = e.clientX;
    }

    if(e.pageY) {
    this.y = e.pageY;
    } else {
    this.y = e.clientY;
    }

    if(e.target) {
    this.target = e.target;
    } else {
    this.target = e.srcElement;
    }
    }

    function addListener(type, callback)
    {
    if (document.addEventListener) {
    document.addEventListener(type, callback, false);
    } else if (document.attachEvent) {
    document.attachEvent("on"+type, callback, false);
    }
    }

    function removeListener (type, callback)
    {
    if (document.removeEventListener) {
    document.removeEventListener(type, callback, false);
    } else if (document.detachEvent) {
    document.detachEvent("on" + type, callback, false);
    }
    }

    function handleDown(e)
    {
    var e = new MouseEvent(e);
    addListener("mousemove", handleMove);
    addListener("mouseup", handleUp);
    offsetX = e.x - parseInt(e.target.style.left);
    offsetY = e.y - parseInt(e.target.style.top);
    document.getElementById("targetDiv").innerHTML = "";
    }

    function handleMove(e)
    {
    var e = new MouseEvent(e);
    var x = e.x - offsetX;
    e.target.style.left = x + "px";
    var y = e.y - offsetY;
    e.target.style.top = y + "px";
    }
    var clicks = 0;
    function handleUp(e)
    {
    var e = new MouseEvent(e);
    removeListener("mousemove", handleMove);
    removeListener("mouseup", handleUp);

    var target = document.getElementById("target");
    var x = parseInt(target.style.left);
    var y = parseInt(target.style.top);
    var width = parseInt(target.style.width);
    var height = parseInt(target.style.height);

    if(e.x > x && e.x < x + width &&
    e.y > y && e.y < y + height){
    var XMLHttpRequestObject = false;



    document.getElementById('clicked').value = ++clicks;

    if (window.XMLHttpRequest) {
    XMLHttpRequestObject = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
    XMLHttpRequestObject = new
    ActiveXObject("Microsoft.XMLHTTP");
    }

    if(XMLHttpRequestObject) {
    XMLHttpRequestObject.open("GET",
    "http://www2.comp.polyu.edu.hk/~10167777d/other/data.txt");

    XMLHttpRequestObject.onreadystatechange = function()
    {
    if (XMLHttpRequestObject.readyState == 4 &&
    XMLHttpRequestObject.status == 200) {
    document.getElementById("targetDiv").innerHTML =
    document
    XMLHttpRequestObject.responseText;
    }
    }

    XMLHttpRequestObject.send(null);
    }
    }
    }

    </script>
    </head>

    <body onmousemove=SetValues()>
    <div id="divCoord"></div>
    <h1>Arrange customer to the dine table</h1>
    <div id="targetDiv"></div>

    <div id="customer1"
    style="left:200px; top:100px; width:60px; height:60;"
    onmousedown="handleDown(event);"></div>

    <div id="customer2"
    style="left:300px; top:100px; width:60px; height:60;"
    onmousedown="handleDown(event);"></div>

    <div id="target"
    style="left:300px; top:300px; width:350px; height:300px;">
    </div>

    You have clicked the link <input id="clicked" size="3" " value="0" > times.

    </body>
    </html>

  2. #2
    Join Date
    Feb 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Here is the real time browser:
    http://htmledit.squarefree.com/

Bookmarks

Posting Permissions

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