...

View Full Version : Javascript image flash when page loads



kellokell
12-05-2006, 02:15 PM
I wonder if anyone can help me, i am creating a simon says game, so far i have got the image (there are 4 each with a day and night version) to react to been clicked (when clicked it changes to the day version and reverts back to the original been the night version, i used the onclick event and a timer) now i want one of the images to randomly flash when the page loads, i know i will need the onload event but i am not sure how i will use it. Does anyone know? PLEASE. Here is what i have so far:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simon Says Game</title>

<style type="text/css">
body {
background-color : black;
}

table {
margin-left: auto;
margin-right: auto;
}

img {
width:450px;
height:225px;
}

#label {
width : 450px;
height : 82px;
background-color : #404040;
position: absolute;
top : 480px;
left : 0 px;
font-family: arial;
font-weight: bold;
font-size: 25px;
text-align: center;
background-image:
url('blue.gif');
}


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

function f(obj,newImg){

oldImg = obj.src;
obj.src=newImg;
window.setTimeout(function(){obj.src=oldImg},500);
}

</script>

</head>

<body onload="f(this,'1day.jpg')">
<table border="1" width="900px" height="530px">
<tr width="900px" height="225px">
<td width="450px" height="225px"><img src="1night.jpg" onclick="f(this,'1day.jpg')">
</td>
<td width="450px" height="225px"><img src="2night.jpg" onclick="f(this,'2day.jpg')"></td>
</tr>
<tr width="900" height="225">
<td width="450px" height="225px"><img src="3night.jpg" onclick="f(this,'3day.jpg')"></td>
<td width="450px" height="225px"><img src="4night.jpg" onclick="f(this,'4day.jpg')"></td>
</tr>
<tr width="900" height="80">
<td>
<div id="label">Retry</div>
</td>
<td>
<div id="label">Score: 0</div>
</td>
</tr>
</table>
</body>
</html>

brandonH
12-05-2006, 07:21 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simon Says Game</title>

<style type="text/css">
body {
background-color : black;
}

table {
margin-left: auto;
margin-right: auto;
}

img {
width:450px;
height:225px;
}

#label {
width : 450px;
height : 82px;
background-color : #404040;
position: absolute;
top : 480px;
left : 0 px;
font-family: arial;
font-weight: bold;
font-size: 25px;
text-align: center;
background-image:
url('blue.gif');
}


</style>
<script type="text/javascript">
function randStart(){
alert();
randNumber=Math.floor(Math.random()*4)+1;
var image=document.getElementById('img'+randNumber);
var wen=image.id.charAt(3)+'day.jpg';
f(image,wen);
}
function f(obj,newImg){

oldImg = obj.src;
obj.src=newImg;
window.setTimeout(function(){obj.src=oldImg},500);
}

</script>

</head>

<body onload="randStart();">
<table border="1" width="900px" height="530px">
<tr width="900px" height="225px">
<td width="450px" height="225px"><img id=img1 src="1night.jpg" onclick="f(this,'1day.jpg')" title=this.src>
</td>
<td width="450px" height="225px"><img id=img2 src="2night.jpg" onclick="f(this,'2day.jpg')" title=this.src></td>
</tr>
<tr width="900" height="225">
<td width="450px" height="225px"><img id=img3 src="3night.jpg" onclick="f(this,'3day.jpg')" title=this.src></td>
<td width="450px" height="225px"><img id=img4 src="4night.jpg" onclick="f(this,'4day.jpg')" title=this.src></td>
</tr>
<tr width="900" height="80">
<td>
<div id="label">Retry</div>
</td>
<td>
<div id="label">Score: 0</div>
</td>
</tr>
</table>
</body>
</html>




hope this is what you were wanting.........

kellokell
12-05-2006, 08:04 PM
yes, thank you so much for that, have a good night.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum