Image fade out/in issue

**websonic** · Jan 6, 2012 13:26

Hello,

I'm having a minor issue with getting the code below make the images in the code fade in and out with each new image that is called. I tried quite a few ways to get this to work, however it appears that I'm to new to scripting to figure it out, so any help would be greatly appreciated.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Title</title>
	<script type="text/javascript">
		//preload images
		var imgs = ["/images/img0.jpg", "/images/img1.jpg", "/images/img2.jpg"];
		var loadedImgs = []
		for (var i=0; i<imgs.length; i++)
		{
			loadedImgs[i] = new Image();
			loadedImgs[i].src = imgs[i];
		}
	</script>
</head>
<body>
	<img src="/images/img0.jpg" id="slide" style="border: 0; cursor: pointer" />
	<script type="text/javascript">
		var slideImg = document.getElementById('slide');
		var step = 0;
		var whichimage = 0;
		var timer;

		function slideit()
		{
			if (!document.images) return;
			slideImg.src = loadedImgs[step].src;
			whichimage = step;
			step = (step < 2) ? step + 1 : 0;
			timer = setTimeout("slideit()", 5000);
		}

                function slidelink()
                {
                        if (whichimage==0)
                        {
                               window.location = "link1.htm";
                        }
                        else if (whichimage==1)
                        {
                               window.location = "link2.htm";
                        }
                        else if (whichimage==2)
                        {
                               window.location = "link3.htm";
                        }
                }

		window.onload = function()
		{
			slideImg.onclick = slidelink;
			slideImg.onmouseover = function(timeElapsed)
			{
				clearTimeout(timer);
			};
			slideImg.onmouseout = function(timeElapsed)
			{
				timer = setTimeout("slideit()", 900);
			};
			slideit();
		};
	</script>
</body>
</html>

It would be nice to not only get them to fade, but to be able to set the time it takes between transition.

Thanks in advance!

**paul_wilkins** · Jan 8, 2012 05:17

You will need two different images for the fade effect to work.

What you can do if you want them fading in with the previous one being fully visible is to have the script create a second image that is fully transparent, and place that second image over the top of the first then gradually make that second image fully opaque.
When it's completed fading in, you set the original image src to that of the new one, and make the second one fully transparent again.

If you just want to fade one out before showing the next, you only need to use setInterval to make the image fully transparent, before using a similar technique to make the next one fully opaque.

**vwphillips** · Jan 8, 2012 07:13

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Title</title>
	<script type="text/javascript">
		//preload images
		var imgs = ["http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg", "http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg", "http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg"];
		var loadedImgs = []
		for (var i=0; i<imgs.length; i++)
		{
			loadedImgs[i] = new Image();
			loadedImgs[i].src = imgs[i];
		}
	</script>
	<script type="text/javascript">
		var slideImg,clone;
		var step = 0;
		var whichimage = 0;
		var timer;

		function slideit(){
			if (!document.images) return;
            var p=pos(slideImg);
			clone.src = loadedImgs[step].src;
            clone.style.left=p[0]+'px';
            clone.style.top=p[1]+'px';
            animate(clone,0,100,new Date(),1000);
			whichimage = step;
			step = (step < 2) ? step + 1 : 0;
			timer = setTimeout("slideit()", 5000);
		}

                function slidelink()
                {
                        if (whichimage==0)
                        {
                               window.location = "link1.htm";
                        }
                        else if (whichimage==1)
                        {
                               window.location = "link2.htm";
                        }
                        else if (whichimage==2)
                        {
                               window.location = "link3.htm";
                        }
                }

function animate(obj,f,t,srt,mS){
 var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
 if (isFinite(now)&&now>=0){
  obj.style.filter='alpha(opacity='+now+')';
  obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
 }
 if (ms<mS){
  setTimeout(function(){ animate(obj,f,t,srt,mS); },10);
 }
 else {
  slideImg.src=obj.src;
  obj.style.left='-3000px';
 }
}

function pos(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 }
		window.onload = function()
		{
		    slideImg = document.getElementById('slide');
            clone=document.createElement('IMG');
            clone.style.position='absolute';
            clone.style.zIndex='101';
            clone.style.left='-3000px';
            document.body.appendChild(clone);
            slideImg.onclick = slidelink;
			slideImg.onmouseover = function(timeElapsed)
			{
				clearTimeout(timer);
			};
			slideImg.onmouseout = function(timeElapsed)
			{
				timer = setTimeout("slideit()", 900);
			};
			slideit();
		};
	</script>
</head>
<body>
<center>	<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" id="slide" style="border: 0; cursor: pointer" />
</center></body>
</html>

User Tag List

Thread: Image fade out/in issue

Thread Tools

Display

Image fade out/in issue

Bookmarks

Bookmarks

Posting Permissions