Help with javascript

Discussion in 'Computer Science & Culture' started by Brutus1964, Feb 26, 2009.

Thread Status:
Not open for further replies.
  1. Brutus1964

    Brutus1964 We are not alone! Registered Senior Member

    Messages:
    608
    I am trying to preload some images in a .js file then access it from an html page. I am having trouble calling the function from the from an onClick event.
    What I want is an image to apear then when I click the image changes. I got it to work when the javascript code is all in the HTML file, but I want it in a .js file so I can reference it from other pages.


    Here is my code:

    <html>
    <head>
    <title>my site</title>


    <script src="loadphoto.js" type="text/javascript"></script>

    <script>
    var point = 0;
    var PicList = {};
    var PicIndex = 0;

    function InstallPics(){
    PicList[0] = "BaldBill.jpg";
    PicList[1] = "BaldBrad.jpg";
    PicList[2] = "BaldBrian.jpg";
    }
    </script>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">

    <!--
    body {
    background-image: url(some%20image/Cover.jpg);
    background-color: #CFC;
    }
    body,td,th {
    color: #FC0;
    }
    -->
    </style>

    InstallPics();

    </head>
    <body>

    <p>&nbsp;</p>
    <h1 align="center">&nbsp;</h1>
    <h1 align="center"><strong>Who's hair? Click your choice's picture.</strong></h1>
    <p align="center">&nbsp;</p>
    <p>&nbsp;</p>
    <table width="570" height="207" border="2" align="center" cellpadding="20" cellspacing="20">
    <tr bgcolor="#FFCC00">
    <td width="113"><p><img src="some image/Bill_Schroader.jpg" width="101" height="139" align="right"></p></td>
    <td width="110"><p><input typeimg src="BaldBill.jpg" onClick="this.src='getNextPic();'" alt="Bill" width="101" height="139" align="bottom"></p></td>

    <td width="111"><p><img src="BaldBrad.jpg" alt="Brad" width="101" height="135" align="bottom"></p></td>
    <td width="110"><p><img src="BaldBrian.jpg" alt="Brian" width="101" height="135" align="bottom"></p></td>
    </tr>
    <tr bgcolor="#FFFFFF">
    <td height="21" bgcolor="#663300"><h3>Who's hair?</h3></td>
    <td bgcolor="#663300"><div align="center">
    <h3>Bill</h3>
    </div></td>
    <td bgcolor="#663300"><div align="center">
    <h3>Brad</h3>
    </div></td>
    <td bgcolor="#663300"><div align="center">
    <h3>Brian</h3>
    </div></td>
    </tr>
    </table>

    </body>
    </html>


    Can anyone help???
     
    Brutus1964, Feb 26, 2009
    #1

  2. Google AdSense Guest Advertisement



    to hide all adverts.
  3. Stryder

    Stryder Keeper of "good" ideas. Valued Senior Member

    Messages:
    13,105
    I can help, but to do so I've got to be able to understand what it is you are trying to do. (I can't actually work that out from your current code since it's pretty broken)

    Are you intending on having a Control Image (For a question), and then 3 choice images A, B and C. A, B and C as standard are question marks (?'s) (Or extreme closeup images etc) and you want a user to click the choice they think they should pick which would match the Control image. If they are right then it will reveal the same image as the Control one but if they are wrong they are shown the images in full of what they are wrong about.

    There are many questions you'd have to ask, like:
    • Do you intend to have more than one "Round"?
    • Is Javascript the best method? (It's easy to read the script and therefore "cheat")
     
    Stryder, Feb 26, 2009
    #2

  4. Google AdSense Guest Advertisement



    to hide all adverts.
  5. Brutus1964

    Brutus1964 We are not alone! Registered Senior Member

    Messages:
    608
    Sorry. Javascript is not my first language but I need it for the project I am working on. I am needing a code that will load images into an array display the images in a table then when I click on an image it will swap the image. I am also looking for a way to click on one image and have it change the images in multiple tables.

    Here is the code that is in my .js file


    }
    function getNextPic(){
    PicIndex = (PicIndex + 1) ;
    return PicList[PicIndex];

    }

    Here is the code for just the table with the image files:

    <table width="570" height="207" border="2" align="center" cellpadding="20" cellspacing="20">
    <tr bgcolor="#FFCC00">
    <td width="113"><p><img src="some image/Bill_Schroader.jpg" width="101" height="139" align="right"></p></td>
    <td width="110"><p><input typeimg src="BaldBill.jpg" onClick="this.src='getNextPic();'" alt="Bill" width="101" height="139" align="bottom"></p></td>

    <td width="111"><p><img src="BaldBrad.jpg" alt="Brad" width="101" height="135" align="bottom"></p></td>
    <td width="110"><p><img src="BaldBrian.jpg" alt="Brian" width="101" height="135" align="bottom"></p></td>
    </tr>
    <tr bgcolor="#FFFFFF">

    Here is the portion of my code that calls the .js file

    <title>my site</title>


    <script src="loadphoto.js" type="text/javascript"></script>

    <script>
    var point = 0;
    var PicList = {};
    var PicIndex = 0;

    function InstallPics(){
    PicList[0] = "BaldBill.jpg";
    PicList[1] = "BaldBrad.jpg";
    PicList[2] = "BaldBrian.jpg";
    }
    </script>

    Hopefully that helps.
     
    Brutus1964, Feb 26, 2009
    #3

  6. Google AdSense Guest Advertisement



    to hide all adverts.
  7. Brutus1964

    Brutus1964 We are not alone! Registered Senior Member

    Messages:
    608
    Stryder

    That is one reason why I want it in a .js file so someone can't just show the source code and cheat.

    It doesn't have to be Javascript. I am just more familiar with that for web programming.

    Each image only has to change once but I also want a way to click on a single image and have it change the rest of the images for each round.
     
    Last edited: Feb 26, 2009
    Brutus1964, Feb 26, 2009
    #4
  8. Brutus1964

    Brutus1964 We are not alone! Registered Senior Member

    Messages:
    608
    Hey I figured it out!
     
    Brutus1964, Feb 28, 2009
    #5
  9. Stryder

    Stryder Keeper of "good" ideas. Valued Senior Member

    Messages:
    13,105
    Good good. I apologise for not responding to you, I had to reinstall someones comp and well it took a chunk of time up

    Please Register or Log in to view the hidden image!

    .
     
    Stryder, Mar 1, 2009
    #6
Thread Status:
Not open for further replies.

Share This Page