Make your own free website on Tripod.com
.JavaScript&more Tutorial
 
 
IMAGE SLIDE SHOW 



  • Accessing images using JavaScript
 In order to create rollover effects, we have to first understand how to access images in general using JavaScript. All images in a web page are treated as an "image object" to  JavaScript. The image object is created for you whenever you insert images onto your webpage. It does so automatically, even if there's not one line of JavaScript code on your page.

The first order of business is to learn how to access images in general using JavaScript. Assuming you have three images on your webpage, as follows: 
       Pic1: Image1           Pic2:Image2            Pic3:Image3

 If you want to refer to the three images using JavaScript, here's how: 
            document.images[0]             //first image 
            document.images[1]              //second image 
            document.images[2]             //third image 

As can be seen, images to JavaScript are an array of images, so you use "[ ]" 
to access each image, "[0]" being the first one. There's an alternative to using integers to access the images, and that is using the name of each image. The name is something you can choose if you want to add  to an image, which makes referring to them a lot easier. The name is inserted in the html tag. 
Lets use the first image as an example:

 <html> 
  <body> 
    <img name="image1" src="Pic1.gif" width="50" height="50"> 
   </body>
 </html> 

Now, to access this image, this is what you'd do instead: 
            document.images["image1"]                //first image

Once you can access images, you can create animations or mouse 
over/out,  even mouse down/up effects. This can be done with the onmouseover/onmouseout event handlers-along with the help of 
preloading images. Let us first talk about images being  preloaded. 


  •  Preloading images 
It is basically loading an image into cache before being used, so whenever we want to use it, let it be read to appears instantaneously. Usually, when we load a page, all image are not preloaded- that's why we see these image becoming visible bit by bit. 

Why would we want to preload an image?
- Because it is the solution to avoiding having delays in between switches of images when using the onmouseover/onmousedown effect- among other things. 

How do we preload an image? 
- By creating an instance of the image object, and inserting it in the <head></head> tags. 

Let us preload two images to be used for the onmouseover/onmouseout effect. These are the two images we shall preload: 
 "Pic1.gif" Image1                    "Pic3.gif"Image3

        <head> 
             <script> 
                  <!-- 
                  image1= new Image(30,30) 
                  image1.src="Pic1.gif" 
                  image2= new Image(30,30) 
                  image2.src="Pic3.gif" 
                  //--> 
             </script> 
        </head> 

Notice that the preloading of the image takes place within in <head></head> section of your webpage!


  •  onMouseover/onMouseout effects script 
<html> 
     <head> 
             <script language="JavaScript"> 
                   <!-- 
                    image1= new Image(30,30) 
                    image1.src="Pic1.gif" 
                    image2= new Image(30,30) 
                    image2.src="Pic3.gif" 
                   //--> 
                   </script> 
     </head> 
<body> 
   <a href="some_file.htm" onmouseover= 
     "document.images['example'].src=image2.src" onmouseout= 
     "document.images['example'].src=image1.src">
   <img src="Pic1.gif" name="example"></a>
</body> 
</html> 

Now you can try the OnMouseOver-OnMouseOut effect:

One very important point: the "onmouseover, onmouseout handler is placed inside the link tag, not the image tag, although we are changing the image. 

Why? 
- First of all, the image object does not support the onmouseover/onmouseout handler! Instead, we place it in the link tag, which will do the trick, because the link tag and the image tag are "connected." 


  • Creating an image slide show (unclickable)


Step 1:
Get some images!
"Pic1.gif" Image1    "Pic2.gif" Image2       "Pic3.gif"Image3

Step 2:
Preload the images using JavaScript. 

The term "preload" in JavaScript refers to the loading of images into cache prior to displaying them. Preloading images is "necessary" in a slide show, since the switching between images have to be instantaneous, without any delay: 

       <head> 
          <script language="JavaScript1.1"> 
              <!-- 
                  var image1=new Image() 
                  image1.src="Pic1.gif" 

                  var image2=new Image() 
                  image2.src="Pic2.gif" 

                  var image3=new Image() 
                  image3.src="Pic3.gif" 
              //--> 
          </script> 
       </head> 

We've created three instances of the image object, each referring to one of the images that make up the slide show. By doing so, the images are loaded into cache, standing by for us to display at anytime. Notice that the entire code is inserted in the <head> section of the page.

Step 3:
Add in the html codes necessary to display the first image of the slide show.

<body> 
     <img src="Pic1.gif" name="slide" width=50 height=50>
</body>

All we've done above is insert the first image of the slide show using HTML. Notice how we gave the image a "name" attribute. By naming the image with an arbitrary name, it enables JavaScript to access and manipulate the image, which we will see next. 

Step 4:
Preparing the script

With everything in place, all we need now is a script that accesses the above image and changes the src of the image periodically, creating a slide show. 

              <script> 
              <!-- 
              //variable that will increment through the images 
                  var step=1 
                  function slideit()
                 { 
                 //if browser does not support the image object, exit. 
                     if (!document.images) 
                        return 
                        document.images.slide.src=eval("image"+step+".src") 
                        if (step<3) 
                       step++ 
                        else 
                       step=1 
                      //call function "slideit()" every 2.5 seconds 
                          setTimeout("slideit()",2500) 
                  } 
              slideit() 
              //--> 
             </script> 

The left handside accesses the path of image "slide" using the image object, then the name of the image, then the keyword "src". The path of any image in a html document can be accessed this way. The right handside dynamically assigns a new src (path) to the image, thus changing the image.

The three possible paths the image may receive are: 
                  image1.src       //"Pic1.gif" 
                  image2.src       //"Pic2.gif" 
                  image3.src       //"Pic3.gif" 
in that order. 

Step 5:
Putting it all together. 

We've preloaded the images, inserted the first image of the slideshow, and created the function necessary to change the path associated with the image. All we have to do now is put it all together into one page, and we've got ourselves a slideshow: 

<html> 
     <head> 
        <script language="JavaScript1.1"> 
        <!-- 
                  var image1=new Image() 
                  image1.src="Pic1.gif" 
                  var image2=new Image() 
                  image2.src="Pic2.gif"
                  var image3=new Image() 
                  image3.src="Pic3.gif" 
          //--> 
          </script> 
    </head>
 <body> 
     <img src="1.gif" name="slide" width=50 height=50>
     <script> 
     <!-- 
          //variable that will increment through the images 
          var step=1 
          function slideit()
         { 
            //if browser does not support the image object, exit. 
            if (!document.images) 
                  return 
            document.images.slide.src=eval("image"+step+".src") 
            if (step<3) 
                 step++ 
             else 
                  step=1 
            //call function "slideit()" every 1.5 seconds 
            setTimeout("slideit()",1500) 
         } 
       slideit() 
     //--> 
     </script> 
 </body> 
</html>



  • A slideshow with a link to a file  (clickable) 
Step 1: 
Surround the existing <img> tag with a <a> tag. 

<a href="javascript:slidelink()"><img src="Pic1.gif" name="slide
   width=50 height=50></a>

The above is called a JavaScript URL, and when clicked on, will call and execute a JavaScript function, instead of load a document. By throwing out the standard link and replacing it with a JavaScript url, a url turns dynamic. Now, there really is nothing mysterious about a JavaScript url- it simply executes a JavaScript function in place of loading a html document. In the above case, the function that will be executed is slidelink(), which we will actually implement in our next step

Step 2:
Declare & implement function slidelink() inside the original slideshow script. 

slidelink() is the function that will dynamically change the url of the slideshow to match the image that's currently being displayed in the slideshow. The below lists the original slideshow script: 
    <script>
    <!--
        var step=1
        //a variable that will keep track of the image currently being displayed.
        var whichimage=1
        function slideit()
       {
           if (!document.images)
               return
           document.images.slide.src=eval("image"+step+".src")
           whichimage=step
           if (step<3)
                step++
           else
                step=1
           setTimeout("slideit()",1800)
       }
       slideit()
       function slidelink()
      {
           if (whichimage==1)
                window.location="first_file_link.htm"
           else if (whichimage==2)
                window.location="second_file_link.htm"
           else if (whichimage==3)
                window.location="third_file_link.htm"
       }
  //-->
  </script>

             We declared a new variable called "whichimage", which will be used to keep track of the image currently in display. In other words, variable "whichimage" keeps track of whether the image currently in display is the first, second, or third image in the slideshow. 
             How does this variable achieve that? By retrieving the number stored inside variable "step"  just before it gets incremented during each image rotation. Once we are able to keep track of this information, we can write code that loads a different url, depending on the image displayed. This is realized through function slidelink().

Step 3
Throw everything together.

<html>
   <head>
      <script language="JavaScript1.1">
      <!--
          //preload images

           var image1=new Image()
           image1.src="Pic1.gif"

           var image2=new Image()
           image2.src="Pic2.gif"

           var image3=new Image()
           image3.src="Pic3.gif"
       //-->
        </script>
    </head>

<body>

  <a href="javascript:slidelink()"><img src="1.gif" name="slide" border=0 width=40 height=40></a>

  <script>
  <!--
  var step=1
  var whichimage=1

  function slideit()
  {
     if (!document.images)
          return

     document.images.slide.src=eval("image"+step+".src")
     whichimage=step

      if (step<3)
           step++
      else
           step=1

      setTimeout("slideit()",2000)
   }
   slideit()

   functionslidelink()
  {
     if (whichimage==1)
          window.location="Ball1.htm"
     else if (whichimage==2)
           window.location="Ball2.htm"
     else if (whichimage==3)
            window.location="Ball3.htm"
    }
  //-->
  </script>
 </body>
</html>

The files Ball1.htm(Ball2.htm, Ball3.htm) look like this one:

<html>
 <head>
   <title>Ball1</title>
 </head>
 <body>
   <img src="Pic1.gif" width="74" height="76" border="0">
  </body>
</html>
 

Now choose which ball do you want to see bigger in the new window.



 
To continue with Combo Link Boxes continue