PDA

View Full Version : Use picture for calculating number of trencherman??



newbieCoder
02-05-2012, 09:59 AM
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/uploads/2011/09/Dining-Room-Tables-Design-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>

newbieCoder
02-05-2012, 10:00 AM
Here is the real time browser:
http://htmledit.squarefree.com/