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.