Internet Explorer Image Transition Effects

Internet Explorer supports its own custom transition effects. These can be used when changing the source of an image, for example on mouse over.

An image on an html page, is represented by the HTML code

<img id=”imgFruit” src=”/images/apples.jpg”>

To change this using JavaScript the src parameter is re-assigned to a different iamge reference:

document.getElementById(“imgFruit”).src=’/images/bananas.jpg’;

The Internet Explorer transitions can be a simple fade between the two images or effects such as swipes and blinds.

JavaScript is used to set the relevant parameters and to trigger the effect.

The example below shows the image tag with its onmouseover and onmouseout actions.

<img src="/images/fruit.png"
onmouseover="replaceImage(this,'fruitO.png');"
onmouseout="imageTrans(this,'fruit.png');">
//
// JavaScript function to enact transition effects
// dependant upon browser type
//
function imageTrans(item,newImage) {
// Get browser name
var browserName=navigator.appName;
// If the browser is Internet Explorer do transition effect
if (browserName=="Microsoft Internet Explorer") {
item.style.filter="blendTrans(duration=5)";
item.style.filter="blendTrans(duration=20)";
item.filters.blendTrans.Apply();
item.filters.blendTrans.Play();
}
// Replace the image
if (document.getElementById){
item.src=newImage;
}
}

The table below shows the Internet Explorer effects and their codes.

Effect	MSIE Transition #	MSIE Effect
None	0	Box in
Box in	0	Box in
Box out	1	Box out
No PPT equiv.	2	Circle in
No PPT equiv.	3	Circle out
Wipe up	4	Wipe up
Wipe down	5	Wipe down
Wipe right	6	Wipe right
Wipe left	7	Wipe left
Vertical blindss	8	Vertical blinds
Horizontal blinds	9	Horizontal blinds
Checkerboard across	10	Checkerboard across
Checkerboard down	11	Checkerboard down
Random dissolve	12	Random dissolve
Split vertical in	13	Split vertical in
Split vertical out	14	Split vertical out
Split horizontal in	15	Split horizontal in
Split horizontal out	16	Split horizontal out
Strips left down	17	Strips left down
Strips left up	18	Strips left up
Strips right down	19	Strips right down
Strips right up	20	Strips right up
Random bars horizontal	21	Random bars horizontal
Random bars vertical	22	Random bars vertical
Random	23	Random