image roll-over script

The requirements for this script are:
a bunch of images, preferably having the same dimensions (ie same width and height).
the user's browser and machine must be pretty fast and can load images moderately quick.
the user is not annoyed by the slow image loading.
the user is not annoyed by the constant flicking of images whenever they are touched.
The steps:
  1. Load the images:
    This involves loading the images used in the flipping frenzy.
    Say you have 6 images, named Gif1.gif, Gif2.gif,...,Gif6.gif.
    They are loaded into the browser's cache with the script below:
    (in the HEAD of the HTML page)     <SCRIPT>
    if (document.images){
    Pix1=new Image;
    Pix1.src="Gif1.gif";
    Pix2=new Image;
    Pix2.src="Gif2.gif";
    ... ...
    Pix6=new Image;
    Pix6.src="Gif6.gif";
    }
    else{
    Pix1.src="";
    Pix2.src="";
    ... ...
    Pix6.src="";
    }
    </SCRIPT>
    The if(document.images) tests to see if the browser accepts images ,and if so, it loads the images into the cache slots (named Pix here). This takes some time. So please do not load 149 images (especially at 50 KB each!). If the browser doesn't like images, the else conditional gives empty values to the Pix.src's, to avoid errors.
  2. Arrange the images:
    In the <BODY> part, put the images where you want them, using tables or simply stick the <IMG..&> tags amongst other tags.
  3. Customise the IMGs for flipping:
    This involves inserting the OnMouseOver and OnMouseOut condition in the IMG tags.

     <a href='javascript:void(0)'
    OnMouseOver="document.Item1.src=Pix4.src;document.Item2.src=Pix5.src;document.Item3.src=Pix6.src"
    OnMouseOut ="document.Item1.src=Pix1.src;document.Item2.src=Pix2.src;document.Item3.src=Pix3.src">
    <IMG SRC="Gif1.gif" Name="Item1"></a>

    <a href='javascript:void(0)'
    OnMouseOver="document.Item1.src=Pix6.src;document.Item2.src=Pix5.src;document.Item3.src=Pix4.src"
    OnMouseOut ="document.Item1.src=Pix1.src;document.Item2.src=Pix2.src;document.Item3.src=Pix3.src">
    <IMG SRC="Gif2.gif" Name="Item1"></a>

    <a href='javascript:void(0)'
    OnMouseOver="document.Item1.src=Pix3.src;document.Item2.src=Pix4.src;document.Item3.src=Pix5.src"
    OnMouseOut ="document.Item1.src=Pix1.src;document.Item2.src=Pix2.src;document.Item3.src=Pix3.src"> <IMG SRC="Gif3.gif" Name="Item1"></a>

    In this example, there are 3 imgs on the page, they are named Item 1, Item2, Item3.
    When the page opens, they are given the images og Gif1.gif, Gif2.gif, Gif3.gif.
    When the mouse rolls over Item1, Item1 switches its image to Pix4.src (ie Gif4.gif, as loaded in the HEAD script),
    similarlly, Item2 gets Pix5.src and Item3 Pix6.
    As the Mouse leaves Item1, the original images return according to the OnMouseOut conditioning.
    In the same fashion, the OnMouseover does the flipping on the other 2 Items (with different changes, however).
    Note the use of quotation marks and semicolons. They are essential syntax.
    This example is displayed below:




    NB: Some would use the syntax of document.images[image-index].src but this can lead to problems in different browsers. To be safe, simply refer to the image as an object, ie document.imageName.src.

    more faq


    MORE TO COME IN NEXT UPDATE
    javascript - basic stuffs