SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need Help making a "tabled Slide show" with 4 pics

    My professor gave us this problem:

    Create an html document named MidtermExam4.html. Add a table to this document with 2 rows
    and 2 columns. Use the Internet or your own photo library to find 4 similarly sized photos and place one photo in
    each of the 4 cells of the table. Write JavaScript code that will change the location of the each image to a different
    table cell every 4 seconds. For example:
    After 0 Seconds, you table would look like this:
    Image 1 Image 2
    Image 3 Image 4
    After 4 Seconds:
    Image 4 Image1
    Image 2 Image 3


    Anyway, I managed to get the pics on the html doc and I'm able to get the first pic to cycle through the others. But, the other pics just stay the same. Here's the code I have so far:

    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    <script type="text/javascript">
    /* <![CDATA[*/
    var curpic="one";
    var changepics;
    function changer() {
    switch (curpic)
    {
    case "one":
    document.images[0].src= "firebird1.jpg";
    curpic = "four";
    break;
    case "two":
    document.images[0].src= "firebird2.jpg";
    curpic = "one";
    break;
    case "three":
    document.images[0].src= "firebird3.jpg";
    curpic = "two";
    break;
    case "four":
    document.images[0].src= "firebird4.jpg";
    curpic = "three";
    break;

    }

    }
    /* ]]> */
    </script>
    </head>

    <body onload="var changepics=setInterval('changer()', 4000);">

    <table>
    <tr>
    <td><img src="firebird1.jpg" width="559" height="243" />
    <td><img src="firebird2.jpg" width="400" height="251" />
    </tr>
    <tr>
    <td><img src="firebird3.jpg" width="480" height="340" />
    <td><img src="firebird4.jpg" width="440" height="330" />
    </tr>
    </table>
    </body>
    </html>

    I don't need any fancy styles or effects, I just need it to work the way as mentioned above. I searched all over the net and found nothing.

    Any help you guys could give would be most appreciated. Thanks!

    -Andrew

  2. #2
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Give each of the images an id="image-1" or image-2 or whatever. Then you can use getelementbyid to change the source of the images.

    I would store the values of the image file names in an array. When fired the script shuffles the array and then uses the array to cycle through the images and assign the sources.

    Also, you need to close your table cell's. Also the dimensions of the images is not necessary for this project (unless your prof says it is )

    Code:
    <td><img src="firebird1.jpg" width="559" height="243" />
    <td><img src="firebird2.jpg" width="400" height="251" />
    </tr>
    should be
    Code:
    <td><img src="firebird1.jpg" /></td>
    <td><img src="firebird2.jpg" /></td>
    </tr>


Bookmarks

Posting Permissions

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