Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Javascript image flash when page loads

    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>

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    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 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.........
    Last edited by brandonH; 12-05-2006 at 08:28 PM.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes, thank you so much for that, have a good night.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •