/    Sign up×
Community /Pin to ProfileBookmark

image rollover, browser differences with transitions on this script, help please??

I’m using the following script on a page I’m developing to rotate a handful of iimages only….I’m very new to javascript so I appreciate any help….my problem is, the images that are being rotated just fine with this neat fading effect into the other images, THAT is great, BUT the transition only is seen in Internet Explorer (as the disclaimer in the code comments clearly states will be the case (and therefore NOT in Firefox which IS the problem)…in Firefox they simple change instantly with no transition….I HAVE to have the same effect in both browsers for the person I’m developing for….she’s a stickler for browser consistency….

First and easiest way, is there a method of altering this free script from codelifter.com to accomplish this feat, or must I find a different one all-together? Any pointers in the right direction for a newbie to learn how to do this correctly?

Thanks so much in advance, here is the javascript:

[CODE]<script>
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 4000

// Duration of crossfade (seconds)
var crossFadeDuration = 4

// Specify the image files
var Pic = new Array() // don’t touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = ‘images/image1.jpg’
Pic[1] = ‘images/image2.jpg’
Pic[2] = ‘images/image3.jpg’
Pic[3] = ‘images/image4.jpg’

// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter=”blendTrans(duration=2)”
document.images.SlideShow.style.filter=”blendTrans(duration=crossFadeDuration)”
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout(‘runSlideShow()’, slideShowSpeed)
}
</script>[/CODE]

Thanks again for any replies about this!

  • Brett
  • to post a comment
    JavaScript

    8 Comments(s)

    Copy linkTweet thisAlerts:
    @Mr_JJul 28.2007 — document.all and filter are IE only

    You'll find there's plenty of cross browser faders on the net if you google, or take a look at this example

    www.huntingground.freeserve.co.uk/imagery/imgswapfade1.htm
    Copy linkTweet thisAlerts:
    @brett007authorJul 28.2007 — document.all and filter are IE only

    You'll find there's plenty of cross browser faders on the net if you google, or take a look at this example

    www.huntingground.freeserve.co.uk/imagery/imgswapfade1.htm[/QUOTE]



    Thank you very much, I appreciate the reply...checking it out now...
    Copy linkTweet thisAlerts:
    @brett007authorJul 29.2007 — document.all and filter are IE only

    You'll find there's plenty of cross browser faders on the net if you google, or take a look at this example

    www.huntingground.freeserve.co.uk/imagery/imgswapfade1.htm[/QUOTE]



    Sorry to bother you with something so basic, but I'm just starting to learn javascript....

    This script is great but I have two problems...

  • 1. I need the 6 images I have to LOOP....indefinitely is the idea, otherwise I would just create a bunch of arrays....I can't find a way to make it loop....


  • 2. I need to have each image fade into each other instead of each image fading completely out before the other one starts....I don't want the page behind the image to EVER be exposed.....looking for a sort of blending effect like the IE javascript I originally posted does...or something at least CLOSER to that...


  • Is this possible with the above script (meaning I'm more of a newbie then I wish to admit) or am I barking up the wrong tree on this one?

    Thanks!

  • - Brett
  • Copy linkTweet thisAlerts:
    @brett007authorJul 29.2007 — See if this is more like it

    http://www.huntingground.freeserve.co.uk/imagery/imgswapfade2.htm[/QUOTE]



    That was a great script! One little problem, if you could help me with this! I can't get it to LOOP in IE, it loops in firefox seemingly indefinitely with the code below, but in IE it only plays through once and then stops on PIC01.JPG...How can I get it to loop in IE like it does in Firefox without adding a bunch of images=[pic#.jpg]'s in the HTML like I started to do below? What code/command am I missing?

    [CODE]
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
    <TITLE>Image Swap Fade 2</TITLE>

    <script type="text/javascript">
    <!--
    // Jeff
    //www.huntingground.freeserve.co.uk

    images=[


    ["images/pic03.jpg","page3.htm"],
    ["images/pic04.jpg","page4.htm"],
    ["images/pic01.jpg","page1.htm"],
    ["images/pic02.jpg","page2.htm"],


    ]

    pause = 1 // seconds
    fadeSpeed = 3

    opac1=100
    opac2=0
    nextPic=0
    nextLink=0
    running=0

    function initISF2(){
    elOpic1=document.getElementById("opic1")
    elOpic2=document.getElementById("opic2")
    lnkLoc=images[nextLink][1]
    document.getElementById("mylink").onclick=function(){isf2Link()}
    document.getElementById("mylink").style.cursor="pointer"

    setTimeout("fadeISF2()",pause*1000)
    }

    function fadeISF2(){
    running=1

    opac1 -= fadeSpeed
    opac2 += fadeSpeed

    if("filters" in document.body && "alpha" in document.body.filters){
    elOpic1.filters.alpha.opacity=opac1
    elOpic2.filters.alpha.opacity=opac2
    }
    else{
    elOpic1.style.opacity=(opac1/100)-0.001
    elOpic2.style.opacity=(opac2/100)-0.001
    }

    if(opac1<=0||opac2<=0){

    if(opac1<=0){elOpic1.src=images[nextPic][0]}
    else{elOpic2.src=images[nextPic][0]}

    nextPic++
    if(nextPic==images.length){nextPic=0}

    nextLink++
    if(nextLink==images.length){nextLink=0}

    fadeSpeed= -fadeSpeed

    running=0
    }

    if(opac1>=100||opac2>=100){
    lnkLoc=images[nextLink][1]
    }

    if(running==0){
    setTimeout("fadeISF2()",pause*1000)
    }
    else{
    setTimeout("fadeISF2()",50)
    }

    }

    function isf2Link(){
    if(running==1){return}
    if(images[nextLink][1]){
    //location=lnkLoc
    newWin=window.open(lnkLoc,'lnk_win','left=200,top=200,width=400,height=300')
    newWin.focus()
    }
    }

    // add onload="initISF2()" to the opening BODY tag

    //-->
    </script>

    <style type="text/css">
    #opic1, #opic2{
    position:absolute;
    left:0px;
    top:0px;
    width:400px;
    height:300px;
    background-color:#FFFFFF;
    border:0;
    cursor:pointer
    }

    #opic1{opacity:0.9}
    #opic2{opacity:0}

    </style>

    <!--[if IE]>
    <style type="text/css">
    #opic1{filter:alpha(opacity=100)}
    #opic2{filter:alpha(opacity=0)}
    </style>
    <![endif]-->

    </HEAD>
    <BODY onload="initISF2()">
    <h1>Image Fade 2</h1>

    <div id="mylink" style="position:relative;left:50%;width:400px;height:300px;overflow:hidden;margin-left: -100px">
    <img id="opic1" src="images/pic01.jpg" alt="">
    <img id="opic2" src="images/pic02.jpg" alt="">
    </div>

    </BODY>
    </HTML>[/CODE]


    I really do appreciate the help on this!
    Copy linkTweet thisAlerts:
    @Mr_JJul 29.2007 — In the array remove the comma from the last index


    ["images/pic03.jpg","page3.htm"],

    ["images/pic04.jpg","page4.htm"],

    ["images/pic01.jpg","page1.htm"],

    ["images/pic02.jpg","page2.htm"] // no comma at the end of the last index


    also variable nextPic should be set to 2

    nextPic=2
    Copy linkTweet thisAlerts:
    @brett007authorJul 30.2007 — In the array remove the comma from the last index


    ["images/pic03.jpg","page3.htm"],

    ["images/pic04.jpg","page4.htm"],

    ["images/pic01.jpg","page1.htm"],

    ["images/pic02.jpg","page2.htm"] // no comma at the end of the last index


    also variable nextPic should be set to 2

    nextPic=2[/QUOTE]


    Wow, it's that simple! I have a lot to learn! I was going crazy trying to figure it out, LOL....

    Thanks again!!

    *update: Just for clarification, it didn't work when setting the NextPic to 2...but it works perfectly when set to the default 0...just letting you know....'2' causes it to display image 1, then 2, then 1 and 2 AGAIN, but only on the first run...after that it runs in the correct 1-4 order and loops.

    Once again, thanks for the assistance on this.

  • - Brett
  • Copy linkTweet thisAlerts:
    @Mr_JJul 30.2007 — Just for clarification, it didn't work when setting the NextPic to 2...but it works perfectly when set to the default 0...just letting you know....'2' causes it to display image 1, then 2, then 1 and 2 AGAIN, but only on the first run...after that it runs in the correct 1-4 order and loops[/QUOTE]


    Now that is strange because thats what I get in my IE and Firefox when setting nextPic to zero
    ×

    Success!

    Help @brett007 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...