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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need a Pro to help with Image Fades

    Hi guys I am new here and need some help with a code if anyone could please that would be great. Ok cananyone help me on this I need to have one html file that displays the first picture when first opened if the user clicks on the picture it disappears and another takes its place. Click again and the second picture fades out and the first re-appears

    Thanks

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Here's one way, in IE you get the fade effect but in Moz a normal image swap


    <SCRIPT language="javascript">
    <!--
    pics = new Array()
    pics[0]="1.gif"
    pics[1]="2.gif"
    pics[2]="3.gif"

    moz=document.getElementById&&!document.all

    var blendtime=1.0 // blend time, in seconds

    preloadpics=new Array() // preloads images
    for (i=0;i<=pics.length-1;i++) {
    preloadpics[i]=new Image()
    preloadpics[i].src=pics[i]
    }

    var Objnum=0

    function blendme(){
    if(!moz){
    document.getElementById("imgA").filters.blendTrans.Apply()
    }
    document.getElementById("imgA").src = pics[Objnum]

    if(Objnum==pics.length-1){Objnum=-1}

    if(!moz){
    document.getElementById("imgA").filters.blendTrans.Play(blendtime)
    }

    Objnum++

    }

    // -->
    </SCRIPT>

    <img id="imgA" src="0.gif" style="filter:blendTrans()" onclick="blendme()">
    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.

  • #3
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    cool thank you very much

  • #4
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is there a way to do this with opacity so it work in Moz and IE if so it would be great if someone could show me a example

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    I am upgrading my pc over the next few days, if no one has done an example for you by the time I get back online I'll see what I can do.

    In the meantime have a bash at it yourself and we'll see where you've got up to when I return.
    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.

  • #6
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok cool I will give it a try I been at this for a week lol

  • #7
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok so i have this far but the only thing is i would like the images change to only happen on when i click the images.

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>Image Fader</title>
    <script type="text/javascript">
    var SbrowseIE = navigator.appName;
    if(SbrowseIE == "Microsoft Internet Explorer") SbrowseIE = true;
    else SbrowseIE = false;

    function fadeImage(imgName, fadeVal){
    var opFilt;
    if (SbrowseIE){
    opFilt=document.getElementById(imgName).style.filter;
    opFilt=opFilt.substr(opFilt.indexOf("=")+1,opFilt.indexOf(")")-(opFilt.indexOf("=")+1));
    }
    else
    opFilt=document.getElementById(imgName).style.MozOpacity*100;

    if(opFilt <= 0 || opFilt >= 100)
    fadeVal=fadeVal*(-1);
    opFilt=opFilt-fadeVal;
    if (SbrowseIE)
    document.getElementById(imgName).style.filter="alpha(opacity="+opFilt+")";
    else
    document.getElementById(imgName).style.MozOpacity=opFilt/100;
    return fadeVal;
    }
    var fVal2;
    var firstTime=true;
    function fadeLoop(){
    if (firstTime){
    firstTime=false;
    fVal2=1;

    if (SbrowseIE){
    document.getElementById("img1").style.filter="alpha(opacity=90)";
    } else {
    document.getElementById("img1").style.MozOpacity=.9;
    }
    }
    fVal2=fadeImage("img2",fVal2);
    setTimeout("fadeLoop()",100);
    }
    </script>
    </head>

    <body onload="fadeLoop();">
    <div style="position:absolute;left:33%;top:0px;"><img src="xlionpair.jpg" border="0" id="img1" /></div>
    <div style="position:absolute;left:33%;top:0px;"><img src="xlionsideways.jpg" id="img2" /></div>
    </body>
    </html>


  •  

    Posting Permissions

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