I need to know how to make an image change to other images 5 times with onload.

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Mary Seelye
    New Member
    • Oct 2010
    • 14
    #1

    I need to know how to make an image change to other images 5 times with onload.

    this is what I have so far, I can only get it to work with the two pictures, and I need 5:


    Code:
    <!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>Concert Ads</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<link rel="stylesheet" href="pineknoll_styles.css" type="text/css" />
<script type="text/javascript">
/* <![CDATA[ */
var curImage="concert1";
var changeImages;
function concertAd() {
if (curImage =="concert2") {
document.images[0].src = "concert1.gif";
curImage = "concert1";
}
else {
document.images[0].src = "concert2.gif";
curImage = "concert2";
}

}
/* ]]> */
</script>
</head>
<body onload="var changeImages=setInterval('concertAd()',1000);">
<table width="100%" cellpadding="0" cellspacing="0">
  <colgroup span="1" align="left" />
  <colgroup span="1" align="center" />
  <tr>
    <td><img src="concert1.gif" height="60" width="370" alt="Image"/><br /></td>
	
  </tr>
</table><hr />
</body>
</html>
    Last edited by gits; Oct 16 '10, 06:22 AM. Reason: added code tags
    Tags: images, javascript, multiple images, onload function
    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5390
      #2
      so you mean that you have 5 pictures that should be shown randomly? or one after another? every 1 sec in place of the first shown one?

        Comment

        • Mary Seelye
          New Member
          • Oct 2010
          • 14
          #3
          one after the other, every 1 second in place of the first one shown. I tried else if statements, but that only showed the last one and did not change.

            Comment

            • gits
              Recognized Expert Moderator Expert
              • May 2007
              • 5390
              #4
              a very simple way with using global variables and an image-array that contains the images sources could look like this:

              Code:
              var curImage = "concert1";

var cImages = [
    'concert1.gif',
    'concert2.gif',
    'concert3.gif',
    'concert4.gif',
    'concert5.gif'
];

var imgCounter = 1;

function concertAd() {
    var imgContainer = document.images[0];
        
    imgContainer.src = cImages[imgCounter];

    imgCounter++;

    if (imgCounter == 4) {
        imgCounter = 0;
    }
}
              everytime the function is called from the interval we add 1 to the counter and use the index to get an element from the array ... if the counter is 4 then we reset the counter to start from the beginning. i just wonder whether 1 sec is a bit short to have a real look at an image - i suspect that it looks a bit flickering? :)

                Comment

                • Mary Seelye
                  New Member
                  • Oct 2010
                  • 14
                  #5
                  that worked out perfect! Thank you for the help!

                    Comment

                    • gits
                      Recognized Expert Moderator Expert
                      • May 2007
                      • 5390
                      #6
                      no problem :) ... just post back to the forum anytime you have more questions ...

                      kind regards

                        Comment

                        • oranoos3000
                          New Member
                          • Jan 2009
                          • 107
                          #7
                          hello
                          you can simply earn the best effect with using jquery.

                            Comment

                            • gits
                              Recognized Expert Moderator Expert
                              • May 2007
                              • 5390
                              #8
                              this is just a matter of taste - since it is unclear what is 'best' ... and even jQuery wouldn't necessarily have to be the 'best' lib to achieve that then ...

                                Comment

                                Previous template Next
                                Working...