PDA

View Full Version : background color to an image



asclepius
12-03-2007, 03:15 AM
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.



<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);">&nbsp;</td>
<td id="11" onclick="checkClick(this.style);">&nbsp;</td>
<td id="12" onclick="checkClick(this.style);">&nbsp;</td>


</tr>
<tr>
<td id="13" onclick="checkClick(this.style);">&nbsp;</td>
<td id="14" onclick="checkClick(this.style);">&nbsp;</td>
<td id="15" onclick="checkClick(this.style);">&nbsp;</td>

</tr>
<tr>
<td id="16" onclick="checkClick(this.style);">&nbsp;</td>
<td id="17" onclick="checkClick(this.style);">&nbsp;</td>
<td id="18" onclick="checkClick(this.style);">&nbsp;</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>

zea726
12-04-2007, 03:52 PM
Though i didnt uderstand ur problem very well but with my understanding i m trying to help u...

document.getElementById(box).style.backgroundImage="url"


hope it would work