www.webdeveloper.com
Results 1 to 3 of 3

Thread: Rotating Background Image Help

  1. #1
    Join Date
    Jun 2005
    Location
    Georgia
    Posts
    155

    Rotating Background Image Help

    Hey, everyone! I found this script that works great for what it's for. However, I would like to use it for background images. Can someone tell me how to adjust this script so it can be used for backgrounds? Thanks in advance!

    Web Page Code
    Code:
    <html>
    
    <head>
    
    <title>slayeroffice | code | image cross fade redux</title>
    
    <link rel="stylesheet" type="text/css" href="xfade2_o.css">
    
    <script type="text/javascript" src="xfade2.js"></script>
    
    </head>
    
    </div>
    <body background="id=imageContainer">
    
    <div id="imageContainer">
    
    <img src="http://slayeroffice.com/code/imageCrossFade/img1.jpg">
    <img src="http://slayeroffice.com/code/imageCrossFade/img2.jpg">
    <img src="http://slayeroffice.com/code/imageCrossFade/img3.jpg">
    <img src="http://slayeroffice.com/code/imageCrossFade/img4.jpg">
    <img src="http://slayeroffice.com/code/imageCrossFade/img5.jpg">
    <img src="http://slayeroffice.com/code/imageCrossFade/img6.jpg">
    
    </div>
    
    </body>
    </html>
    Style Sheet 1
    Code:
    #imageContainer {
    	height:309px;
    }
    
    #imageContainer img {
    	display:none;
    	position:absolute;
    	top:0; left:0;
    }
    Style Sheet 2
    Code:
    #imageContainer {
    	position:relative;
    	margin:auto;
    	width:500px;
    	border:1px solid #000;
    }
    JavaScript
    Code:
    window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);
    
    var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
    
    function so_init() {
    	if(!d.getElementById || !d.createElement)return;
    
    	css = d.createElement("link");
    	css.setAttribute("href","xfade2.css");
    	css.setAttribute("rel","stylesheet");
    	css.setAttribute("type","text/css");
    	d.getElementsByTagName("head")[0].appendChild(css);
    
    	imgs = d.getElementById("imageContainer").getElementsByTagName("img");
    	for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
    	imgs[0].style.display = "block";
    	imgs[0].xOpacity = .99;
    	
    	setTimeout(so_xfade,1000);
    }
    
    function so_xfade() {
    	cOpacity = imgs[current].xOpacity;
    	nIndex = imgs[current+1]?current+1:0;
    
    	nOpacity = imgs[nIndex].xOpacity;
    	
    	cOpacity-=.05; 
    	nOpacity+=.05;
    	
    	imgs[nIndex].style.display = "block";
    	imgs[current].xOpacity = cOpacity;
    	imgs[nIndex].xOpacity = nOpacity;
    	
    	setOpacity(imgs[current]); 
    	setOpacity(imgs[nIndex]);
    	
    	if(cOpacity<=0) {
    		imgs[current].style.display = "none";
    		current = nIndex;
    		setTimeout(so_xfade,1000);
    	} else {
    		setTimeout(so_xfade,50);
    	}
    	
    	function setOpacity(obj) {
    		if(obj.xOpacity>.99) {
    			obj.xOpacity = .99;
    			return;
    		}
    		obj.style.opacity = obj.xOpacity;
    		obj.style.MozOpacity = obj.xOpacity;
    		obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
    	}
    	
    }

  2. #2
    Join Date
    Jun 2005
    Location
    Georgia
    Posts
    155
    I guess it doesn't have to be like that code...I just really need some help with this. I only need 2 images to change within a table cell. I would use a simple animated gif but I can't stand how terrible the quality is.

    Does someone know of a script that can simulate an animated gif only with other image file types? Thanks!

  3. #3
    Join Date
    Jun 2005
    Location
    Georgia
    Posts
    155
    Found a little simpler script. Can this be modified slightly so that it can be called into a table background instead of an img tag? Thanks!

    JavaScript File
    Code:
    var bannerImg = new Array();
      bannerImg[0]="image1.png";
      bannerImg[1]="image2.png";
    
    var newbanner = 0;
    var totalBan = bannerImg.length;
    
    function cycleBan() {
      newbanner++;
      if (newbanner == totalBan) {
        newbanner = 0;
      }
      document.banner.src=bannerImg[newbanner];
      setTimeout("cycleBan()", 3*1000);
    }
    window.onload=cycleBan;
    Head of HTML Page
    Code:
    <script type="text/javascript" src="banner.js"></script>
    Body of HTML Page
    Code:
    <img id="banner">

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles