ImageFadeInOut

ImageFadeInOut
(last updated: Jun 6, 2008)

This is a variation of the timer-based image sequencing example from Notes 14. What is added is the manner in which the images are changed by fading out the old one and fading in the new one. Here is how the program works:

Image Fade Out/In

The code introduces one particularly new concept: a JavaScript way of setting the opacity of an element. Here is the function we use:

function set_opacity(opacity) 
{
  var main = document.getElementById("main")
  main.style.MozOpacity = opacity/100;
  main.style.filter = 
	 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')';
}

This works for Internet Explorer and Firefox by virtue of two completely different style properties. The "opacity" parameter varies between 0 and 100:

  0: totally opaque, completely blocking out image
100: totally transparent, completely revealing image

The timing operates in three phases:

the segment timer between successive fade-out/fade-in phases, every 7 seconds:
```
timer = setInterval( "next_img()", 7000 )
```
the fade-out timer running every 50 millisec:
```
timer = setInterval( "fade_out()", 50 )
```
It takes 20 calls to fade_out() to complete, thus the total fade-out time can be computed by this simple calculation:
```
20 * 50 millisec = 1000 millisec = 1 sec
```
the fade-in timer running every 50 millisec., like the fade-out:
```
timer = setInterval( "fade_in()", 50 )
```

The call to

clearInterval(timer)

is used to stop one phase of the timer before starting the next. Here is the code:

<html>
<head>
<title>Fade in/Fade out Timed Image Sequence</title>
<script>
<!--
// preload images
var imgs = new Array()  // use an Array so we can use indices effectively
imgs[1] = new Image()
imgs[1].src = "mexico/town.jpg"
imgs[2] = new Image()
imgs[2].src = "mexico/lake.jpg"
imgs[3] = new Image()
imgs[3].src = "mexico/statue.jpg"
imgs[4] = new Image()
imgs[4].src = "mexico/cathedral.jpg"

/* set_opacity: of main image,
     0: totally opaque, completely blocking out image
   100: totally transparent, completely revealing image
*/
function set_opacity(opacity) 
{
  var main = document.getElementById("main")
  main.style.MozOpacity = opacity/100;
  main.style.filter = 
	 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')';
}

var opacity = 100
var timer = null

/* 
  fade_out/fade_in: 
    fade_out:
      opacity goes 100 -> 0 in 20 steps of 5, 1 step per 50 ms.
      thus 20 * 50 = 1000 ms = 1sec to fade out

    fade_in:
      opacity goes 0 -> 100 in 20 steps of 5, 1 step per 50 ms.
      thus 1sec to fade in
*/
function fade_out() {   // called every 50ms. when active
  opacity = opacity - 5

  set_opacity(opacity)
  
  if (opacity == 0) { // completely faded out
	
    // stop fade_out timer
    clearInterval(timer)

    // change to next image
    var main = document.getElementById("main")
    main.src = imgs[ind].src

    var num = document.getElementById("num")
    num.innerHTML = ind		
		
    // start fade_in timer
    timer = setInterval( "fade_in()", 50 ) // every 50 millisec
  }
}

function fade_in() {   // called every 50ms. when active
  opacity = opacity + 5

  set_opacity(opacity)
  
  if (opacity == 100) { // next image faded in completely

    // stop fade_in timer, set up next segment timer
    clearInterval(timer)
    timer = setInterval( "next_img()", 7000 )  
  }
}

var ind = 1;

/* next_img:
     change index to next image. 
     start fade out of current (takes 1 sec.)
     fade_out, when done starts fade in of new image (takes 1 sec.)
*/

function next_img() {
  ind = ind + 1
  if (ind > 4) ind = 1

  // stop segment timer start fade_out/fade_in 
  clearInterval(timer)
  timer = setInterval( "fade_out()", 50 ) // every 50 millisec
}

// set the initial image and start the timer
function init() 
{
  var main = document.getElementById("main")
  main.src = imgs[1].src

  var num = document.getElementById("num")
  num.innerHTML = 1

  // set change image to start in 7 sec.
  timer = setInterval( "next_img()", 7000 )
}
// -->
</script>
</head>
<body onload="init()">
<img id="main" />
<div>Slide <span id="num"></span></div>
</body>
</html>

ImageFadeInOut(last updated: Jun 6, 2008)

ImageFadeInOut
(last updated: Jun 6, 2008)