Avatar of hankknight
hankknight
Flag for Canada asked on

Fade when changing <div> content

Hello.
I use the following script to change images using a smooth blend. (Cross Browser)

Now I want to change the ENTIRE contents of a <div> tag, not just an image, and blend smoothly the same way.

Any ideas?

Thanks!




<script>

function opacity(id, opacStart, opacEnd, millisec) {
      //speed for each frame
      var speed = Math.round(millisec / 100);
      var timer = 0;

      //determine the direction for the blending, if start and end are the same nothing happens
      if(opacStart > opacEnd) {
            for(i = opacStart; i >= opacEnd; i--) {
                  setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
                  timer++;
            }
      } else if(opacStart < opacEnd) {
            for(i = opacStart; i <= opacEnd; i++)
                  {
                  setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
                  timer++;
            }
      }
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
      var object = document.getElementById(id).style;
      object.opacity = (opacity / 100);
      object.MozOpacity = (opacity / 100);
      object.KhtmlOpacity = (opacity / 100);
      object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
      //if an element is invisible, make it visible, else make it ivisible
      if(document.getElementById(id).style.opacity == 0) {
            opacity(id, 0, 100, millisec);
      } else {
            opacity(id, 100, 0, millisec);
      }
}

function blendimage(divid, imageid, imagefile, millisec) {
      var speed = Math.round(millisec / 100);
      var timer = 0;
      
      //set the current image as background
      document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
      
      //make image transparent
      changeOpac(0, imageid);
      
      //make new image
      document.getElementById(imageid).src = imagefile;

      //fade in image
      for(i = 0; i <= 100; i++) {
            setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
            timer++;
      }
}

function currentOpac(id, opacEnd, millisec) {
      //standard opacity is 100
      var currentOpac = 100;
      
      //if the element has an opacity set, get it
      if(document.getElementById(id).style.opacity < 100) {
            currentOpac = document.getElementById(id).style.opacity * 100;
      }

      //call for the function that changes the opacity
      opacity(id, currentOpac, opacEnd, millisec)
}


function blendimage(divid, imageid, imagefile, millisec) {
    var speed = Math.round(millisec / 100);
    var timer = 0;
     
    //set the current image as background
    document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
     
    //make image transparent
    changeOpac(0, imageid);
     
    //make new image
    document.getElementById(imageid).src = imagefile;

    //fade in image
    for(i = 0; i <= 100; i++) {
        setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
        timer++;
    }
}
</script>

<div style="border:1px solid red;width: 35px; height: 35px;" id="blenddiv">
    <img src="http://www.google.com/options/icons/labs.gif" style="width: 35px; height: 35px; border: 0 none; filter: alpha(opacity=100); -moz-opacity: 100; opacity: 100;" id="blendimage" alt="" />
</div>

<a href="javascript:blendimage('blenddiv','blendimage', 'http://www.google.com/options/icons/checkout.gif',1500)"  >Image 1</a>
<a href="javascript:blendimage('blenddiv','blendimage', 'http://www.google.com/options/icons/directory.gif',1500)" >Image 2</a>
<a href="javascript:blendimage('blenddiv','blendimage', 'http://www.google.com/options/icons/finance.gif',1510)"   >Image 3</a>


JavaScript

Avatar of undefined
Last Comment
Ashutosh Vyas

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Ashutosh Vyas

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Your help has saved me hundreds of hours of internet surfing.
fblack61