SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image fade out/in issue

    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!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •