background color to an image
Hello i was wondering if anyone could show me how to make an image appear instead of just a colored box (which is orange at the moment) Thank you.
PHP Code:<html>
<head>
<title> Game </title>
<script style="text/javascript">
</script>
</head>
<body>
<script language="javascript">
var objBox;
var box;
var iTimesAnimate;
var gameStarted;
var wrongClicks;
var TotalDisplay;
gameStarted = false;
wrongClicks=0;
TotalDisplay=0;
function checkClick(objBox1)
{
if(gameStarted)
{
objBox = objBox1;
if(objBox.backgroundColor == "orange")
{
document.mole.score.value = eval(document.mole.score.value) + 1;
}
else
{
wrongClicks = wrongClicks + 1;
}
}
}
function getRandom()
{
return (Math.round(Math.random()*(9))+9);
}
function highlightBox()
{
if(gameStarted)
{
box = getRandom();
document.getElementById(box).style.backgroundColor = "orange";
TotalDisplay = TotalDisplay + 1;
setTimeout('document.getElementById(box).style.backgroundColor = "#ffffff"',700);
setTimeout('highlightBox()',800);
}
}
function initialize()
{
gameStarted = confirm('Are you ready to start testing your reflexes??')
if(gameStarted)
{
document.mole.score.value = 0;
TotalDisplay=0;
setTimeout('startTime()',10);
highlightBox();
}
else
document.mole.btnStart.disabled = false;
}
</script>
<table width="100%" height="400">
<tr>
<td align="center" valign="middle">
<table width="500" height="500" border="1" cellpadding="0" cellspacing="0" style="border-color:blue;boder-style:outset">
<input type='hidden' id="9"></font>
<tr>
<td id="10" onclick="checkClick(this.style);"> </td>
<td id="11" onclick="checkClick(this.style);"> </td>
<td id="12" onclick="checkClick(this.style);"> </td>
</tr>
<tr>
<td id="13" onclick="checkClick(this.style);"> </td>
<td id="14" onclick="checkClick(this.style);"> </td>
<td id="15" onclick="checkClick(this.style);"> </td>
</tr>
<tr>
<td id="16" onclick="checkClick(this.style);"> </td>
<td id="17" onclick="checkClick(this.style);"> </td>
<td id="18" onclick="checkClick(this.style);"> </td>
</tr>
</table>
<form name="mole">
<b>Score:</b>
<input type="text" name="score" readonly char="10">
<input type="button" name="btnStart" value="Start" onclick="document.mole.btnStart.disabled = true;initialize();" style="width:75px">
</form>
</td>
</tr>
</table>
<p align=center><input type="reset" onclick="javascript:reset(); return true;"></p>
</body>
</html>
CSS Codes
Reply With Quote
Bookmarks