Objects that don't bother eachother.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Objects that don't bother eachother.

Post by JellyFish »

Hello, this is the current code.

Code: Select all

<html>
<head>
<title>Mancala</title>
<script language="Javascript" type="text/javascript">
function Pocket_onclick(obj)
{
//Math.round(Math.random()*10);
node = new Image();
node.src = "Images/Stone.png";
node.style.position = "relative";
node.style.left = Math.round(Math.random()*10);
node.style.top = Math.round(Math.random()*10);
window.status = obj.parentNode.id + " | " + obj.id;
obj.appendChild(node);
}

function Pocket_onmouseover(obj)
{
if (obj.parentNode.id == "bottom")
{
document.body.style.cursor = "hand";
}
}

function Pocket_onmouseout(obj)
{
document.body.style.cursor = "default";
}
</script>
</head>
<body>
<table border="0" cellspacing="5" cellpadding="0" background="Images/Board.png">
<tr id="top">
<td id="left" width="50" height="50" align="center" rowspan="2" onclick="Pocket_onclick(this)" onmouseover="Pocket_onmouseover(this)" onmouseout="Pocket_onmouseout(this)">

</td>
<td id="1" width="50" height="50" align="center" onclick="Pocket_onclick(this)" onmouseover="Pocket_onmouseover(this)" onmouseout="Pocket_onmouseout(this)">

</td>
<td id="2" width="50" height="50" align="center" onclick="Pocket_onclick(this)" onmouseover="Pocket_onmouseover(this)" onmouseout="Pocket_onmouseout(this)">

</td>
<td id="3" width="50" height="50" align="center" onclick="Pocket_onclick(this)" onmouseover="Pocket_onmouseover(this)" onmouseout="Pocket_onmouseout(this)">

</td>
<td id="4" width="50" height="50" align="center" onclick="Pocket_onclick(this)" onmouseover="Pocket_onmouseover(this)" onmouseout="Pocket_onmouseout(this)">

</td>
<td id="5" width="50" height="50" align="center" onclick="Pocket_onclick(this)" onmouseover="Pocket_onmouseover(this)" onmouseout="Pocket_onmouseout(this)">

</td>
<td id="6" width="50" height="50" align="center" onclick="Pocket_onclick(this)" onmouseover="Pocket_onmouseover(this)" onmouseout="Pocket_onmouseout(this)">

</td>
<td id="right" width="50" height="50" align="center" rowspan="2" onclick="Pocket_onclick(this)" onmouseover="Pocket_onmouseover(this)" onmouseout="Pocket_onmouseout(this)">

</td>
</tr>
<tr id="bottom">
<td id="1" width="50" height="50" align="center" onclick="Pocket_onclick(this)" onmouseover="Pocket_onmouseover(this)" onmouseout="Pocket_onmouseout(this)">

</td>
<td id="2" width="50" height="50" align="center" onclick="Pocket_onclick(this)" onmouseover="Pocket_onmouseover(this)" onmouseout="Pocket_onmouseout(this)">

</td>
<td id="3" width="50" height="50" align="center" onclick="Pocket_onclick(this)" onmouseover="Pocket_onmouseover(this)" onmouseout="Pocket_onmouseout(this)">

</td>
<td id="4" width="50" height="50" align="center" onclick="Pocket_onclick(this)" onmouseover="Pocket_onmouseover(this)" onmouseout="Pocket_onmouseout(this)">

</td>
<td id="5" width="50" height="50" align="center" onclick="Pocket_onclick(this)" onmouseover="Pocket_onmouseover(this)" onmouseout="Pocket_onmouseout(this)">

</td>
<td id="6" width="50" height="50" align="center" onclick="Pocket_onclick(this)" onmouseover="Pocket_onmouseover(this)" onmouseout="Pocket_onmouseout(this)">

</td>
</tr>
</table>
</body>
</html>
The Stone objects append in the table-datas. But when the second stones thereafter are added to the td's it moves the first stone over to the left. I understand why this would happen. It's because when any element is added to a parent node it's going to do just this.

So what I need is to some how give these stones the property so that they don't effect eachother, more, overlap eachother. I'm thinkin' this would have to do with the display property in css?

Thank you for taking you time reading this post.
Post Reply