Objects that don't bother eachother.
Posted: Tue Dec 26, 2006 4:45 pm
Hello, this is the current code.
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.
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>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.