Web Analytics Made Easy -
StatCounter Image fade script - CodingForum

Announcement

Collapse
No announcement yet.

Image fade script

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Image fade script

    Hiya,

    i've downloaded the image slideshow fading script on http://www.dynamicdrive.com/dynamicindex14/image4.htm

    and i was wondering if it was possible to do this:

    1. specify 10 images
    2. show a permanent specified "image1" which doesnt fade onload.
    3. create a button (gfx) which onclick will fade image1 into a random image (of the last 9)
    4. on each buttonclick it should fade into the remaining images and when the last image is "used" it should go back to image1 - and then start all over


    is this at all possible...and how?

    If its impossible can it be done with permanent specified images (image1 to image2, image2 to image3, etc.) with the random thing?


    Hope someone has a solution Or a link to a place it can be done in other ways

  • #2
    For your first image if you look at the instructions it shows you how to add more images. For your second and third questions here is an example of the modified code that I put together. I changed two variables - step and whichimage they now are set to the number 2 instead of 1. I also removed the onLoad event from the body tag and added a text link that you click on each time to perform the function slideit(). You should be able to change it to a image link. Here is the code:
    <html>
    <head>
    <title>Image Fade</title>
    <script language="JavaScript1.2">

    /*
    Blending Image Slide Show Script-
    © Dynamic Drive (www.dynamicdrive.com)
    For full source code, 100's more DHTML scripts, and Terms Of Use, visit dynamicdrive.com
    */

    function reapply(){
    setTimeout("slideit()",2000)
    return true
    }
    window.onerror=reapply
    </script>
    <script language="JavaScript1.1">
    <!--
    var image1=new Image()
    image1.src="0.gif"
    var image2=new Image()
    image2.src="1.gif"
    var image3=new Image()
    image3.src="2.gif"
    //-->
    </script>
    </head>
    <body>
    <a href="javascript:slidelink()" onMouseover="window.status='Click on the image to learn more about it!';return true" onMouseout="window.status=''"><img src="0.gif" name="slide" border=0 style="filter:blendTrans(duration=3)"></a>
    <script>
    <!--
    ////change number of images below
    var number_of_images=3
    //change speed below (in seconds)
    var speed=3
    var step=2 // *** changed this to two from one ****
    var whichimage=2 // *** changed this to two from one ***
    function slideit(){
    if (!document.images)
    return
    if (document.all)
    slide.filters.blendTrans.apply()
    document.images.slide.src=eval("image"+step+".src")
    if (document.all)
    slide.filters.blendTrans.play()
    whichimage=step
    if (step<number_of_images)
    step++
    else
    step=1
    // if (document.all)
    // setTimeout("slideit()",speed*1000+3000)
    // else
    // setTimeout("slideit()",speed*1000)
    }
    function slidelink(){
    if (whichimage==1)
    window.location="link1.htm"
    else if (whichimage==2)
    window.location="link2.htm"
    else if (whichimage==3)
    window.location="link3.htm"
    }
    //-->
    </script>
    <br><br><center><a href="javascript:slideit()">Do Image Fade</a></center><br><br>
    <p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
    <a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>
    </body>
    </html>

    Comment


    • #3
      Thanks a lot - it works like a charm - even in Netscape (without the fading thing though)

      Comment


      • #4
        i was wondering if it was possible to add a random function to this script - to make image0 fade into a random image everytime you click on the "fade button" ??


        and maybe even add some sorta function that remembers which image has been "tagged" to avoid showing the same image 4 times in 8 clicks?
        Last edited by rane; Jul 8, 2002, 03:13 AM.

        Comment

        Working...
        X