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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation How to flash an image in java script

    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

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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-leftauto;
    margin-rightauto;


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


    #label {
    width 450px;
    height 82px;
    background-color #404040;
    positionabsolute;
    top 480px;
    left 0 px;
    font-familyarial;
    font-weightbold;
    font-size25px;
    text-aligncenter;
    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> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

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

  • #4
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you so much, 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
    •