Link to home
Start Free TrialLog in
Avatar of hankknight
hankknightFlag 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>


ASKER CERTIFIED SOLUTION
Avatar of Ashutosh Vyas
Ashutosh Vyas
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial