4 Replies Latest reply on Apr 19, 2010 11:45 AM by LLOG Lady

    Applying Javascript Code

    LLOG Lady Level 1

      How do I edit a copied Javascript code to customize it for my site?

       

      I copied the following code into the Head of my page as directed (http://www.jsmadeeasy.com/javascripts/Background%20Effects/background_slide_show/index.htm) but, having never worked with Javascript before, I'm not sure how to make it work and can't find any tutorials explaining it.

       

      I tried replacing "img1.jpg", "img2.jpg", and "img3.jpg", with each of the three pictures I'd like to fade in and out (my attempt is shown in red below), but it told me I have a syntax error...

       

      <style>
      body{
      /*Remove below line to make bgimage NOT fixed*/
      background-attachment:fixed;
      background-repeat: no-repeat;
      /*Use center center in place of 300 200 to center bg image*/
      background-position: 300 200;
      }
      </style>

      <script language="JavaScript1.2">
      var bgimages=new Array()
      bgimages[0]="<img src="Images/rig shot flare2.png" width="640" height="424" alt="rigflare" />"
      bgimages[1]="img2.jpg"
      bgimages[2]="img3.jpg"

      //preload images
      var pathToImg=new Array()
      for (i=0;i<bgimages.length;i++){
      pathToImg[i]=new Image()
      pathToImg[i].src=bgimages[i]
      }

      var inc=-1

      function bgSlide(){
      if (inc<bgimages.length-1)
      inc++
      else
      inc=0
      document.body.background=pathToImg[inc].src
      }

      if (document.all||document.getElementById)
      window.onload=new Function('setInterval("bgSlide()",3000)')

      </script>

        • 1. Re: Applying Javascript Code
          John Waller Adobe Community Professional & MVP

          Remove the HTML markup. All that's required in the array is the image path and name

           

          bgimages[0]="Images/rig shot flare2.png"

           

          Check: is your images folder named Images (capital) or images (lowercase)?

           

          Avoid spaces in image names wherever possible.

           

          bgimages[0]="Images/rig_shot_flare2.png"

          • 2. Re: Applying Javascript Code
            LLOG Lady Level 1

            Thanks very much, the behavior works as intended now- but it's not applied correctly just yet:

             

            I must have misunderstood the meaning of "background image" in this sense. The background image I'm attempting to add javascript to is defined through a CSS "background image" rule (applied to div tag: "main_image"), since I have a text box on top of the image (Not sure if there is another way to do that...). The image is inside a div tag within the container div tag:

             

            div id="container"

                 div id= "main_image"

             

            Entering the code as is, applies the image and behavior outside of the container-- it does not apply the behavior to my existing "main_image", as intended-- "main_image" remains unchanged, but the Array is added outside the container.

             

            How would I modify the code to apply it to my "main_image"?

             

            I tried copying the script into the Body of my source code (instead of into the Head as directed), beneath the "main_image" div tag, and changing "bg image" to "main_image" but it did not work.

            • 3. Re: Applying Javascript Code
              John Waller Adobe Community Professional & MVP

              Can you post a link to your site to give better context to your question?

              • 4. Re: Applying Javascript Code
                LLOG Lady Level 1

                My site isn't published yet, sorry- no link!

                 

                Let me update my question:

                 

                How do I position my Javascript slideshow now that I've gotten it to work? I need it to float to the right edge of my page...

                 

                Once that is figured out, is it possible to have a text box (not part of the slideshow) overlapping the slideshow?