469,926 Members | 1,533 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,926 developers. It's quick & easy.

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

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


Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Concert Ads</title>
  6. <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
  7. <link rel="stylesheet" href="pineknoll_styles.css" type="text/css" />
  8. <script type="text/javascript">
  9. /* <![CDATA[ */
  10. var curImage="concert1";
  11. var changeImages;
  12. function concertAd() {
  13. if (curImage =="concert2") {
  14. document.images[0].src = "concert1.gif";
  15. curImage = "concert1";
  16. }
  17. else {
  18. document.images[0].src = "concert2.gif";
  19. curImage = "concert2";
  20. }
  21.  
  22. }
  23. /* ]]> */
  24. </script>
  25. </head>
  26. <body onload="var changeImages=setInterval('concertAd()',1000);">
  27. <table width="100%" cellpadding="0" cellspacing="0">
  28.   <colgroup span="1" align="left" />
  29.   <colgroup span="1" align="center" />
  30.   <tr>
  31.     <td><img src="concert1.gif" height="60" width="370" alt="Image"/><br /></td>
  32.  
  33.   </tr>
  34. </table><hr />
  35. </body>
  36. </html>
Oct 16 '10 #1

✓ answered by gits

a very simple way with using global variables and an image-array that contains the images sources could look like this:

Expand|Select|Wrap|Line Numbers
  1. var curImage = "concert1";
  2.  
  3. var cImages = [
  4.     'concert1.gif',
  5.     'concert2.gif',
  6.     'concert3.gif',
  7.     'concert4.gif',
  8.     'concert5.gif'
  9. ];
  10.  
  11. var imgCounter = 1;
  12.  
  13. function concertAd() {
  14.     var imgContainer = document.images[0];
  15.  
  16.     imgContainer.src = cImages[imgCounter];
  17.  
  18.     imgCounter++;
  19.  
  20.     if (imgCounter == 4) {
  21.         imgCounter = 0;
  22.     }
  23. }
  24.  
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? :)

7 2215
gits
5,390 Expert Mod 4TB
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?
Oct 16 '10 #2
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.
Oct 16 '10 #3
gits
5,390 Expert Mod 4TB
a very simple way with using global variables and an image-array that contains the images sources could look like this:

Expand|Select|Wrap|Line Numbers
  1. var curImage = "concert1";
  2.  
  3. var cImages = [
  4.     'concert1.gif',
  5.     'concert2.gif',
  6.     'concert3.gif',
  7.     'concert4.gif',
  8.     'concert5.gif'
  9. ];
  10.  
  11. var imgCounter = 1;
  12.  
  13. function concertAd() {
  14.     var imgContainer = document.images[0];
  15.  
  16.     imgContainer.src = cImages[imgCounter];
  17.  
  18.     imgCounter++;
  19.  
  20.     if (imgCounter == 4) {
  21.         imgCounter = 0;
  22.     }
  23. }
  24.  
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? :)
Oct 16 '10 #4
that worked out perfect! Thank you for the help!
Oct 16 '10 #5
gits
5,390 Expert Mod 4TB
no problem :) ... just post back to the forum anytime you have more questions ...

kind regards
Oct 16 '10 #6
oranoos3000
107 100+
hello
you can simply earn the best effect with using jquery.
Oct 17 '10 #7
gits
5,390 Expert Mod 4TB
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 ...
Oct 17 '10 #8

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by johanvdv | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.