SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    May 2005
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background image to rotate with a fade

    Hi,
    What I'm trying to figure out is how to get background images to rotate with a fade in a header without using an image in div in the body.
    A combination of javascript and CSS -- not sure if this is the correct forum or not?

    I can achieve an image changing/rotating in a div using the code just below. But I have to refresh the page for the image to change.


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
        <head>
            <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
            <title>Rotate Images</title>
            <script type="text/javascript">
    			var backgroundSrcs = new Array("list-of-images");
    			function pickimage()
    			{
    				//This line picks an image at random from the list you entered above
    				var bgimage=backgroundSrcs[(Math.round(Math.random()*(backgroundSrcs.length-1)))]
    				
    				//This line applies the background image to your header
    				//document.getElementById("header").style.backgroundimage = "url('" + bgimage + "')";
    				document.getElementById("header").style.background = "url('" + bgimage + "') no-repeat";
    			}        
    	 </script>
    
            <style type="text/css">
    			#header {
    				padding:125px 10px;
    				margin-top: 0px;
    				background-repeat: no-repeat;
    			}   
    			h1 {
    				padding-bottom: 0;
    				font-size: 1.95em;
    				color: #f0ebee;
    			}         
            </style>
    
        </head>
    
        <body onLoad="pickimage();">
            <div id="header">
               <h1>abc def ghi</h1>
            </div>
        </body>
    
    </html>

    And I can get the image to rotate, change on its own, with the javascript below but have to do it using through an img div, a place-holder.


    Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
        <head>
            <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
            <title>Rotate Images through img tag</title>
            <script type="text/javascript">
    			var rotatingImages = new Array("../list-of-images");
    
                imageCount = rotatingImages.length;
                firstTime = true;
                duration = "3"; //seconds
                function rotateImage(){
                    // Cycle through images sequentially starting with a random image
                    // Do not update the image if loading is not yet completed
                    if (document.getElementById('rotatingImage').complete || firstTime){
                        if (firstTime) {
                            thisImage = Math.floor((Math.random() * imageCount))
                            firstTime = false
                        }else{
                            thisImage++
                            if (thisImage == imageCount) {
                                thisImage = 0
                            }
                        }
                        document.getElementById('rotatingImage').src = rotatingImages[thisImage]
                        setTimeout("rotateImage()", duration * 1000)
                    }
                }
            </script>
    		<style type="text/css">
    			#rotatingImage{
    				display:block;
    				width:750px;
    				border:2px solid #997;
    			}
    		</style>
        </head>
        <body onLoad="rotateImage();">
            <div id="header">
                <img id="rotatingImage" src="" alt="">
            </div>
        </body>
    </html>
    So what I really would like to do is have the image rotate through the div and not have to have the img tag present.

    I haven't even tackled the fade but have some thoughts about this. Since it's the header div I want to do the fading not the img tag, I'm thinking the way to make the fade work will be the same.

    thanks so much in advance

  2. #2
    SitePoint Addict
    Join Date
    May 2005
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone please?
    Should I be in the CSS forum?

    thank you


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
  •