free hosting   image hosting   hosting reseller   online album   e-shop   famous people 
Free Website Templates
Free Installer

Slideshow Using
blendTrans Filter


This script is from Website Abstraction.

It lets you create a simple 4-image slideshow using the IE blendTrans filter.

Furthermore, each image can link to a different Web page.


Paste this code in the head section of your page:
This section goes inside the body tag:
And this section goes in the body itself:

How It Works


The 4 images are pre-loaded in the top section.

The default graphic - 1.jpg - is inside a link tag and given the name slide.

The blendTrans filter is also assigned at this point:
<a href="javascript:slidelink()" onFocus="this.blur()">
<img src="1.jpg" name="slide" border=0 width="100"
height="50" style="filter:blendTrans(duration=2)"></a>
blendTrans works in a similar way to the revealTrans filter.

The difference is that it blends - or dissolves - into the next graphic.

The duration value is the length of the dissolve in seconds.

When the page is loaded, function slideit() is called.

First, it applies the filter:
slide.filters.blendTrans.apply()
... then it evaluates the image's location:
document.images.slide.src=eval("image"+step+".src")
... and finally, it executes the filter effect:
slide.filters.blendTrans.play()

The variable step is used as:
  • a counter to cycle through the 4 images, applying the filter to each
  • an image pointer
    • The number of the image is assigned to variable whichimage:
    whichimage=step
    ... then the counter is incremented until it reaches 4, then reset to 1:
    if (step < 4)
    step++
    else
    step=1
    The duration of the effect - 5 seconds - is controlled by a setTimeout command:
    setTimeout("slideit()",5000)
    Note that this includes the blendTrans duration period of 2 seconds.

    So, in this example, each image remains on screen in full for 3 seconds.

    The blendTrans duration & setTimeout values may be adjusted to suit.

    When the timeout expires, the function is called again to load the next image.

    The cycle repeats indefinitel, and that's your slideshow!


    If more images are required:
  • increase the image array in the head section (pre-load images)
  • increase the step limit accordingly - eg: if (step < 12) for 12 images
  • make sure all images are exactly the same size for best results

    • The links for each graphic are determined by the function slidelink().

    This called whenever a graphic is clicked.

    It uses an if else statement to see which image is currently displayed:
    if (whichimage==1)
    window.location="page1.html"
    else if (whichimage==2)
    window.location="page2.html"
    else if (whichimage==3)
    window.location="page3.html"
    else if (whichimage==4)
    window.location="page4.html"
    If the graphic is image 1, link 1 is selected. And so on.

    The selected link will then open in the same window.


    Try It Out

    Click on any of the 4 graphics for a different page:



    © 2001 CyberSchool