...

View Full Version : How to flash an image in java script



kellokell
12-04-2006, 06: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, 07:20 PM
Try it this way


<!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, 08:58 PM
Thank you so much, hope you have a good night.

kellokell
12-04-2006, 08:59 PM
thank you so much, have a good night.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum