Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Nov 2004
    Location
    near the only active volcano in the continental US
    Posts
    409
    Thanks
    6
    Thanked 2 Times in 2 Posts

    Question Fading Opacity and Sequencing Problem Here

    Okay, so I figured out one problem I was having with this code and fixed that, but now I am hitting a snag with two other problems.

    The basic idea is that there are three images I want to fade in and out in a sequential order. For the time being, I am working solely with alpha opacity (will be adding code for FF in the future) and was pretty sure I had it worked out that one image would fade out while the next image faded in. Unfortunately it is not doing what it is supposed to and instead of fading from the first image to the next, it is snapshotting from the first to the second. Furthermore, it doesn't seem to be going to the third image at all. I am not getting any error messages from the script, but I am at a complete loss as to why it isn't preforming the fade function or continuing through the sequential order. Any hints on which direction I should go (or for that matter, anyone willing to point out a blatant error on my part) would be welcomed. I've highlighted the part of the code that doesnt seem to be working as it should.


    Code:
    <script type="text/javascript" charset="ISO-8859-1">
    <!--
    var allimgs=new Array("desertbg2.jpg","illyanaone.jpg","illyanatwo.jpg","illyanatre.jpg","temple.gif","momglyph.gif","momnonglyph.gif","roeglyph.gif","roenonglyph.gif","totmglyph.gif","totmnonglyph.gif")
    var imgload=new Array()
    var whichimg=new Array("illypic1","illypic2","illypic3")
    var currentimg=0
    var nextimg=1
    var fade = new Array(100,0,0)
    
    for (pl=0;pl<allimgs.length;pl++)
    {
    	imgload[pl]=new Image()
    	imgload[pl].src=allimgs[pl]
    }
    
    function initializeview()
    {
    document.getElementById("illypic1").filters.alpha.opacity=fade[0]
    document.getElementById("illypic2").filters.alpha.opacity=fade[1]
    document.getElementById("illypic3").filters.alpha.opacity=fade[2]
    setTimeout("startrotation()",3000)
    }
    
    function startrotation()
    {
    for (fr=0;fr<20;fr++)
    {
    fade[currentimg]=fade[currentimg]-10
    fade[nextimg]=fade[nextimg]+10
    document.getElementById(whichimg[currentimg]).filters.alpha.opacity=fade[currentimg]
    document.getElementById(whichimg[nextimg]).filters.alpha.opacity=fade[nextimg]
    }
    if (nextimg=2)
    {
    nextimg=0
    }
    else
    {
    nextimg=nextimg+1
    }
    if (currentimg=2)
    {
    currentimg=0
    }
    else
    {
    currentimg=currentimg+1
    }
    setTimeout("startrotation()",3000)
    }
    -->
    </script>

  • #2
    Regular Coder
    Join Date
    Nov 2004
    Location
    near the only active volcano in the continental US
    Posts
    409
    Thanks
    6
    Thanked 2 Times in 2 Posts
    Well, I managed to fix the sequencing problem but I am still running into difficulties with the opacity. If anyone has any clue please send it my way, here is the updated code where I am having the problem.

    Code:
    function fadeimg()
    {
    document.getElementById(whichimg[nextimg]).style.visibility="visible"
    for (i=1;i<11;i++)
    {
    fade[currentimg]=100-(10*i)
    fade[nextimg]=0+(10*i)
    document.getElementById(whichimg[currentimg]).filters.alpha.opacity=fade[currentimg]
    document.getElementById(whichimg[nextimg]).filters.alpha.opacity=fade[nextimg]
    }
    document.getElementById(whichimg[currentimg]).style.visibility="hidden"
    setTimeout("rotateimg()",3000)
    }

  • #3
    Regular Coder
    Join Date
    Nov 2004
    Location
    near the only active volcano in the continental US
    Posts
    409
    Thanks
    6
    Thanked 2 Times in 2 Posts
    So nobody had any clue on this? Ah well, guess it is back to the old drawing board again.

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Try something on these lines


    PHP Code:
    <script type="text/javascript">
    <!--
    var 
    allimgs=new Array("desertbg2.jpg","illyanaone.jpg","illyanatwo.jpg","illyanatre.jpg","temple.gif","momglyph.gif","momnonglyph.gif","roeglyph.gif","roenonglyph.gif","totmglyph.gif","totmnonglyph.gif")
    var 
    imgload=new Array()

    for (
    pl=0;pl<allimgs.length;pl++){
        
    imgload[pl]=new Image()
        
    imgload[pl].src=allimgs[pl]
    }

    function 
    initializeview(){
    setTimeout("startrotation()",1000)
    }

    lastimg=1
    nextimg
    =2
    step
    =10
    moz
    =document.getElementById&&!document.all
    hm
    =0
    timer
    =null

    function startrotation(){
    clearTimeout(timer)

    if(!
    moz){
    document.getElementById("illypic"+lastimg).filters.alpha.opacity+= -step
    document
    .getElementById("illypic"+nextimg).filters.alpha.opacity+= step
    }
    else{
    document.getElementById("illypic"+lastimg).style.MozOpacity-=(step/100)

    hm+=step/100
    document
    .getElementById("illypic"+nextimg).style.MozOpacity=hm-0.1
    }

    if(!
    moz){
    if(
    document.getElementById("illypic"+lastimg).filters.alpha.opacity<=0){
    document.getElementById("illypic"+lastimg).filters.alpha.opacity=0
    lastimg
    =nextimg
    nextimg
    ++
    if(
    nextimg==4){
    nextimg=1
    }
    }

    }
    else{

    if(
    document.getElementById("illypic"+lastimg).style.MozOpacity<0){
    document.getElementById("illypic"+lastimg).style.MozOpacity=0
    lastimg
    =nextimg
    nextimg
    ++
    hm=0
    if(nextimg==4){
    nextimg=1
    }
    }

    }


    timer=setTimeout("startrotation()",50)
    }
    setTimeout("initializeview()",1000)
    -->
    </script>


    <img id="illypic1" src="desertbg2.jpg" style="filter:alpha(Opacity=100);-moz-opacity:1">
    <img id="illypic2" src="illyanaone.jpg" style="filter:alpha(Opacity=0);-moz-opacity:0">
    <img id="illypic3" src="illyanatwo.jpg" style="filter:alpha(Opacity=0);-moz-opacity:0"> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #5
    Regular Coder
    Join Date
    Nov 2004
    Location
    near the only active volcano in the continental US
    Posts
    409
    Thanks
    6
    Thanked 2 Times in 2 Posts
    Thanks Mr. J. Will give it a shot and see if that gets me to where I want. I solved the problem in IE but want to make sure it is cross browser compatable. Looks like your code might solve the problem. Will let you know the results the next chance I get.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •