How to flash an image in java script

kellokell · 12-04-2006, 05:51 PM

I would apreciate it so much if some one can help me...PLEASE, it is for my uni project. PLEASE.
I am trying to create a flash by changing 2 images(both images are the same apart from one is in daylight and one in the night), i am unsure of how to do this even though i have researched the topic. First of all i would just like to create the flash with night1.jpg( which is the original pic) and day.jpg(the pic i want it to change to), i want the flash to occur when the image is clicked then add a timer so it it returns to its original state. so far i have:

<!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(e) {

if (!e) e=window.event;

var old = e.srcElement.img;

e.srcElement.img = "H:\Year 2\Web Technologies\Group 4 Project\1day.jpg";

//old = window.setTimeout("reset(" + old + e.target,1000));

}

</script>

</head>

<body onclick="f(event)">
<table border="1" width="900px" height="530px">
<tr width="900px" height="225px">
<td width="450px" height="225px"><img src="1night.jpg" onclick="f(event)">
</td>
<td width="450px" height="225px"><img src="2night.jpg" alt="Eiffel Tower"></td>
</tr>
<tr width="900" height="225">
<td width="450px" height="225px"><img src="3night.jpg" alt="Christ Redeemer"></td>
<td width="450px" height="225px"><img src="4night.jpg" alt="TajMahal"></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>

Thank you for your time

Mr J · 12-04-2006, 06:20 PM

Try it this way

PHP Code:


			
<!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},1000)

}



</script>



</head> 



<body > 

<table border="1" width="900px" height="530px">

<tr width="900px" height="225px">

<td width="450px" height="225px"><img src="1night.jpg" onclick="f(this,'H:\Year 2\Web Technologies\Group 4 Project\1day.jpg')">

</td>

<td width="450px" height="225px"><img src="2night.jpg" alt="Eiffel Tower"></td>

</tr> 

<tr width="900" height="225">

<td width="450px" height="225px"><img src="3night.jpg" alt="Christ Redeemer"></td>

<td width="450px" height="225px"><img src="4night.jpg" alt="TajMahal"></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>

kellokell · 12-04-2006, 07:58 PM

Thank you so much, hope you have a good night.

kellokell · 12-04-2006, 07:59 PM

thank you so much, have a good night.