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...


      /*Remove below line to make bgimage NOT fixed*/
      background-repeat: no-repeat;
      /*Use center center in place of 300 200 to center bg image*/
      background-position: 300 200;

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

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

      var inc=-1

      function bgSlide(){
      if (inc<bgimages.length-1)

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


        • 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.



          • 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?