JavaScript Forum

**BFDFreq** · 04-03-2009, 11:20 PM

I am quite new to Javascript, so I was wondering if anyone could help me out with the code below. I'm trying to get 5 images to automatically keep changing on a webpage.

Code that does not work:

HTML Code:

<html>

<head>
<title>Site XYZ</title>
</head>

<body onLoad="LoadImages(); SetTimer()">

<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--->
<!----------DO NOT TOUCH JAVASCRIPT---------->
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--->
<script type="text/javascript">
var Pics = new Array();
var Index = 1;

function LoadImages()
{
  Pics[0] = new Image();
  Pics[0].src = "./images/top1.jpg";
  Pics[1] = new Image();
  Pics[1].src = "./images/top.jpg";
  Pics[2] = new Image();
  Pics[2].src = "./images/top2.jpg";
  Pics[3] = new Image();
  Pics[3].src = "./images/top3.jpg";
  Pics[4] = new Image();
  Pics[4].src = "./images/top4.jpg";

  document.images[0].src = Pics[0].src;
}

function ChangePic()
{
  Index ++
  if (Index > 4) {Index = 0;}
  document.images[0].src = Pics[Index].src;
}

</script>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--->
<!----------DO NOT TOUCH JAVASCRIPT---------->
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--->

<center>

    <!--------------------WEBPAGE MAIN TABLE--------------------!>
    <table border="0" cellpadding="0" cellspacing="0" width="950">
    <tr><td align="center">


<!--------------------TOP BANNER--------------------!>
<table border="0" cellpadding="0" cellspacing="0" width="950">
  <tr>
    <td>
     <img src="./images/top1.jpg" />
<script>
Index1 = 0;
function SetTimer()
{
    Timer = setInterval("Animate()", 5000);
}
function Animate()
{
    Index1 ++;
    if (Index1 > 4) {
        Index1 = 0;
    };
    document.images[1].src = Pics[Index1].src;
}
</script>
    
    </td>
  </tr>
</table>


    </td></tr>
    </table>

</center>


</body>
</html>

On the code above, the first (top) image loads, and no animation occurs.

Code that works, but in error:

HTML Code:

<html>

<head>
<title>Site XYZ</title>
</head>

<body onLoad="LoadImages(); SetTimer()">

<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--->
<!----------DO NOT TOUCH JAVASCRIPT---------->
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--->
<script type="text/javascript">
var Pics = new Array();
var Index = 1;

function LoadImages()
{
  Pics[0] = new Image();
  Pics[0].src = "./images/top.jpg";
  Pics[1] = new Image();
  Pics[1].src = "./images/top1.jpg";
  Pics[2] = new Image();
  Pics[2].src = "./images/top2.jpg";
  Pics[3] = new Image();
  Pics[3].src = "./images/top3.jpg";
  Pics[4] = new Image();
  Pics[4].src = "./images/top4.jpg";

  document.images[0].src = Pics[0].src;
}

function ChangePic()
{
  Index ++
  if (Index > 4) {
    Index = 0;
  }
  document.images[0].src = Pics[Index].src;
}

</script>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--->
<!----------DO NOT TOUCH JAVASCRIPT---------->
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--->

<center>

    <!--------------------WEBPAGE MAIN FLOATING TABLE--------------------!>
    <table border="0" cellpadding="0" cellspacing="0" width="950">
    <tr><td align="center">


<!--------------------TOP BANNER--------------------!>
<table border="0" cellpadding="0" cellspacing="0" width="950">
  <tr>
    <td>
     <img src="./images/top.jpg" />
<script>
Index1 = 0;
function SetTimer()
{
    Timer = setInterval("Animate()", 5000);
}
function Animate()
{
    Index1 ++;
    if (Index1 > 4) {
        Index1 = 0;
    };
    document.images[1].src = Pics[Index1].src;
}
</script>
    
    </td>
  </tr>
</table>

    </td></tr>
    <tr><td align="center">


<!--------------------NAVIGATION--------------------!>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="950">
  <tr>
    <td><center><img src="./images/top.jpg" /></center></td>
  </tr>
</table>

    </td></tr>
    </table>


</center>


</body>
</html>

On this code, the first (top) images appears. Then a second one pops up below it, and that's where the animation continues. The top image doesn't do a darn thing.

**Sleeping Troll** · 06:22 PM

You should use css, give each picture a named div with position absolute, use the display property "block" for the pic you wish to display and "none" for the others. Assign a class "image" for example and you can reposition the images on the page by simply changing the position for the class in css.