<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
javascript cnnot control the 'playing' of a gif but can control the loading of a gif
<div style="height:600px;" ></div>
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
<div style="height:600px;" ></div>
<script type="text/javascript">
/*<![CDATA[*/
var swap={
init:function(id,src,top){
var obj=document.getElementById(id),img=new Image();
img.src=src;
obj={
obj:obj,
src1:obj.src,
src2:src,
top:top
}
this.addevt(window,'scroll','swap',obj);
},
swap:function(obj){
var top=this.wwhs()[3];
if (top>obj.top&&obj.obj.src==obj.src1){
obj.obj.src=obj.src2
}
else if (top<obj.top&&obj.obj.src==obj.src2){
obj.obj.src=obj.src1
}
},
wwhs:function(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
}
}
swap.init('tst','http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg',500)
/*]]>*/
</script>
</body>
</html>