set timeout/set interval in cells [Archive]

asclepius

12-02-2007, 10:46 PM

I was wondering if anyone could guide me on how to have the picture in each cell change after 2 seconds IF the user does not click it in time but if the user does click on the image, it goes to another cell (as it currently does)

Thank you

I think i would use the timeout and interval functions, but i am not sure.

<html>
<head>
<STYLE type="text/css">

TD
{
FONT-WEIGHT: bold;
FONT-SIZE: 75pt;
WIDTH: 75pt;

COLOR: black;
FONT-FAMILY: Wingdings;
HEIGHT: 20pt;

TEXT-ALIGN: center
}

H5
{
MARGIN-TOP: 0px;
MARGIN-BOTTOM: 0px
}

</STYLE>
<script style="text/javascript">

var score=0;
var start;

function putscore()
{
scoreDate=new Date()
var now=scoreDate.valueOf();
if (document.getElementById)
document.getElementById("score").innerHTML=score ;
}

function reset()
{
score=0;
putscore();
}

function highlight(cell)
{
var oncell = false;
var r=Math.round(9*Math.random()) +10;
var imgSrc = "mole.jpg";
var imgCell;
if (document.getElementById) {
cell = document.getElementById(cell);
if (cell && cell.innerHTML != " ") {
cell.innerHTML = " ";
oncell = true;
}

if (oncell) {

imgCell = document.getElementById("cell_"+r);
if (imgCell)
{
imgCell.innerHTML = '<img src="mole.jpg" border="0" alt="Picture Unavailable">';
}
else
{
document.getElementById("cell_10").innerHTML = '<img src="mole.jpg" border="0" alt="">';
}

score++;
putscore();
}
}
}
</script>
</head>

<body>

<h2 align="center">Whack the Mole</h2>

<h4 align="center">Hits=<span id="score">0</span></h4>

<table border="1" align="center" cellspacing="0" cellpadding="0">
<tr>

<td id="cell_10" onclick="highlight('cell_10');return true;"><img src="mole.jpg"></td>
<td id="cell_11" onclick="highlight('cell_11');return true;"> </td>
<td id="cell_12" onclick="highlight('cell_12');return true;"> </td>

</tr>
<tr>
<td id="cell_13" onclick="highlight('cell_13');return true;"> </td>
<td id="cell_14" onclick="highlight('cell_14');return true;"> </td>
<td id="cell_15" onclick="highlight('cell_15');return true;"> </td>

</tr>
<tr>
<td id="cell_16" onclick="highlight('cell_16');return true;"> </td>
<td id="cell_17" onclick="highlight('cell_17');return true;"> </td>
<td id="cell_18" onclick="highlight('cell_18');return true;"> </td>

</tr>

</table>
<p align=center><input type="reset" onclick="javascript:reset(); return true;"></p>

</body>
</html>