background image

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • tetris
    #1

    background image

    I have this little code wich is working quite good, it makes a slide
    show on the body background, anyone could guide me on how to add a
    fade effect as a transition between the images??



    var Pic = new Array('cow2.jpg ','cow3.jpg','c ow4.jpg');
    j=0;
    p=Pic.length;

    function preLoad() {
    var preLoad = new Array()
    for (i = 0; i < p; i++){
    preLoad[i] = new Image();
    preLoad[i].src = Pic[i];
    }
    }


    function runBGSlideShow( ){
    document.body.b ackground = Pic[j];
    j++;
    if (j (p-1)){
    j=0
    }
    setTimeout('run BGSlideShow()', 2000);
    }

    </script>
    </head>
    <body onload="runBGSl ideShow();preLo ad()">
    Tags: None
    • None
      #2
      Re: background image

      On 4ÔÂ28ÈÕ, ÉÏÎç4ʱ00·Ö, tetris <tetri...@gmail .com>wrote:
      I have this little code wich is working quite good, it makes a slide
      show on the body background, anyone could guide me on how to add a
      fade effect as a transition between the images??
      >
      var Pic = new Array('cow2.jpg ','cow3.jpg','c ow4.jpg');
      j=0;
      p=Pic.length;
      >
      function preLoad() {
      var preLoad = new Array()
      for (i = 0; i < p; i++){
      preLoad[i] = new Image();
      preLoad[i].src = Pic[i];
      >
      }
      }
      >
      function runBGSlideShow( ){
      document.body.b ackground = Pic[j];
      j++;
      if (j (p-1)){
      j=0}
      >
      setTimeout('run BGSlideShow()', 2000);
      >
      }
      >
      </script>
      </head>
      <body onload="runBGSl ideShow();preLo ad()">
      You can use the JQuery. There are already some method to make
      animation in JQuery.

        Comment

        • tetris
          #3
          Re: background image

          On 28 avr, 03:41, None <jdxyw2...@gmai l.comwrote:
          On 4ÔÂ28ÈÕ, ÉÏÎç4ʱ00·Ö, tetris <tetri...@gmail .comwrote:
          >
          >
          >
          I have this little code wich is working quite good, it makes a slide
          show on the body background, anyone could guide me on how to add a
          fade effect as a transition between the images??
          >
          var Pic = new Array('cow2.jpg ','cow3.jpg','c ow4.jpg');
          j=0;
          p=Pic.length;
          >
          function preLoad() {
          var preLoad = new Array()
          for (i = 0; i < p; i++){
          preLoad[i] = new Image();
          preLoad[i].src = Pic[i];
          >
          }
          }
          >
          function runBGSlideShow( ){
          document.body.b ackground = Pic[j];
          j++;
          if (j (p-1)){
          j=0}
          >
          setTimeout('run BGSlideShow()', 2000);
          >
          }
          >
          </script>
          </head>
          <body onload="runBGSl ideShow();preLo ad()">
          >
          You can use the JQuery. There are already some method to make
          animation in JQuery.
          i dont want to use frameworks

            Comment

            • RobG
              #4
              Re: background image

              On Apr 28, 3:40 pm, tetris <tetri...@gmail .comwrote:
              On 28 avr, 03:41, None <jdxyw2...@gmai l.comwrote:
              >
              >
              >
              On 4ÔÂ28ÈÕ, ÉÏÎç4ʱ00·Ö, tetris <tetri...@gmail .comwrote:
              >
              I have this little code wich is working quite good, it makes a slide
              show on the body background, anyone could guide me on how to add a
              fade effect as a transition between the images??
              >
              var Pic = new Array('cow2.jpg ','cow3.jpg','c ow4.jpg');
              j=0;
              p=Pic.length;
              >
              function preLoad() {
              var preLoad = new Array()
              for (i = 0; i < p; i++){
              preLoad[i] = new Image();
              preLoad[i].src = Pic[i];
              >
              }
              }
              >
              function runBGSlideShow( ){
              document.body.b ackground = Pic[j];
              j++;
              if (j (p-1)){
              j=0}
              >
              setTimeout('run BGSlideShow()', 2000);
              >
              }
              >
              </script>
              </head>
              <body onload="runBGSl ideShow();preLo ad()">
              >
              You can use the JQuery. There are already some method to make
              animation in JQuery.
              >
              i dont want to use frameworks
              It is normally done using setTimeout or setInterval to step through
              various levels of opacity with a pause of say 50ms between steps -
              increasing one image while decreasing the other. Search the archives
              for "fade opacity".

              You might like to look at this post in another group by Peter
              Michaux :

              <URL: http://groups.google.com/group/forkj...478a40367d215#
              >
              There was also a thread there on opacity performance - it's a little
              old now but likely much of it still applies. It also suggests
              strategies for ensuring the fade works well in different browsers and
              slower platforms.


              --
              Rob

                Comment

                • tetris
                  #5
                  Re: background image

                  On 28 avr, 08:45, RobG <rg...@iinet.ne t.auwrote:
                  On Apr 28, 3:40 pm, tetris <tetri...@gmail .comwrote:
                  >
                  >
                  >
                  >
                  >
                  On 28 avr, 03:41, None <jdxyw2...@gmai l.comwrote:
                  >
                  On 4ÔÂ28ÈÕ, ÉÏÎç4ʱ00·Ö, tetris <tetri...@gmail .comwrote:
                  >
                  I have this little code wich is working quite good, it makes a slide
                  show on the body background, anyone could guide me on how to add a
                  fade effect as a transition between the images??
                  >
                  var Pic = new Array('cow2.jpg ','cow3.jpg','c ow4.jpg');
                  j=0;
                  p=Pic.length;
                  >
                  function preLoad() {
                  var preLoad = new Array()
                  for (i = 0; i < p; i++){
                  preLoad[i] = new Image();
                  preLoad[i].src = Pic[i];
                  >
                  }
                  }
                  >
                  function runBGSlideShow( ){
                  document.body.b ackground = Pic[j];
                  j++;
                  if (j (p-1)){
                  j=0}
                  >
                  setTimeout('run BGSlideShow()', 2000);
                  >
                  }
                  >
                  </script>
                  </head>
                  <body onload="runBGSl ideShow();preLo ad()">
                  >
                  You can use the JQuery. There are already some method to make
                  animation in JQuery.
                  >
                  i dont want to use frameworks
                  >
                  It is normally done using setTimeout or setInterval to step through
                  various levels of opacity with a pause of say 50ms between steps -
                  increasing one image while decreasing the other. Search the archives
                  for "fade opacity".
                  >
                  You might like to look at this post in another group by Peter
                  Michaux :
                  >
                  <URL:http://groups.google.com/group/forkj...m/thread/05d47....
                  >
                  >
                  >
                  There was also a thread there on opacity performance - it's a little
                  old now but likely much of it still applies. It also suggests
                  strategies for ensuring the fade works well in different browsers and
                  slower platforms.
                  >
                  --
                  Rob- Masquer le texte des messages pr¨¦c¨¦dents -
                  >
                  - Afficher le texte des messages pr¨¦c¨¦dents -
                  thanks for your reply, i have found the effect but they are generally
                  implemented over a div on the document, i've been trying to tweak it
                  to get to the body.background of the document, will keep on trying..

                    Comment

                    Previous template Next
                    Working...