Image Changer Using Dissolve

This script uses the dissolve filter supported by Internet Explorer 4 and later when switching between images. Visitors with other browsers, such as Netscape or Opera, will see a simple substitution of the image.

You will need to create a placeholder image (image0.gif), plus, of course, the images you want to display. I have used two in this example, but there's no reason why you should not increase the number, with a whole row of buttons to switch between them. Here's the code:

<script language="JavaScript" type="text/javascript">
var RunningIE4 = (msieversion() >=4);

function msieversion() {
	var ua = window.navigator.userAgent
	var msie = ua.indexOf ( "MSIE " )
	if ( msie > 0 )		// is Microsoft Internet Explorer; return version number
		return parseInt ( ua.substring ( msie+5, ua.indexOf ( ".", msie ) ) )
	else
		return 0	// is other browser
}

if (RunningIE4) {
  changePic = dissolvePix
  } else {
  changePic  = switchPic}

function switchPic(picObj, newSrc) {
  picObj.src = newSrc}

function dissolvePix(picObj, imgfile){
// This is for IE4 or later, and dissolves the images together using a visual filter.
picObj.filters.revealTrans.Apply();        
picObj.src = imgfile
picObj.filters.revealTrans.Play()   
}  // end of function
</script>

<div align="center"><img name="image1" src="image0.gif" style="filter:revealTrans(Duration=0.7, Transition=12)" width="240" height="160" border="0" alt="">
<form>
<input type="button" value="Stonehenge" onclick='changePic(document.images["image1"], "stonehenge.jpg")'>
<input type="button" value="The Taj Mahal" onclick='changePic(document.images["image1"], "tajmahal.jpg")'>
</form></div>