Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    May 2014
    Posts
    20
    Thanks
    5
    Thanked 1 Time in 1 Post

    Add Dynamically Loaded Images And Assign To Background Image Rotator

    Code:
    var finance_image = new Array(6);
    for(var i=0; i<finance_image.length; i++) {
    	finance_image[i] = new Image();
    	finance_image[i].src = "images/finance" + i + ".jpg";
    	/*alert("finance_image" + i + ".src = " + finance_image[i].src);*/
    }
    function rotateImages() {
    	setInterval("startRotator()", 7000);
    }
    var counter = 0;
    function startRotator() {
    	if( counter >= finance_image.length ) {
    		counter = 0;
    	}
    	/*alert("finance_image" + counter + ".src = " + finance_image[counter].src);*/
    	var image = "url('" + finance_image[counter] + ".src')";
    	counter++;
    	document.body.style.backgroundImage=image;
    	/*alert("document.body.style.backgroundImage.src = " + document.body.style.backgroundImage);*/
    }
    Code:
    document.body.style.backgroundImage=image;
    That line of code doesn't work. How do I assign a dynamic image object to the background image. I've tried everything I know or could search for, until the wee hours of the morning .......

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,719
    Thanks
    25
    Thanked 662 Times in 661 Posts
    if variable image is correct it works.
    document.body.style.backgroundImage = "url('images/GreenDragon.jpg')"; WORKS
    If picture = "url('images/GreenDragon.jpg')";
    then document.body.style.backgroundImage= picture; WORKS.

    What is variable image ? Use:
    var image = "url('" + finance_image[counter] + ".src')";
    alert(image);
    and see cause it don't look right to me.
    Last edited by sunfighter; 05-12-2014 at 04:32 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    May 2014
    Posts
    20
    Thanks
    5
    Thanked 1 Time in 1 Post
    Quote Originally Posted by sunfighter View Post
    What is variable image ? Use:
    var image = "url('" + finance_image[counter] + ".src')";
    alert(image);
    and see cause it don't look right to me.
    The value in the image variable is - url('[objectHTMLImageElement].src')

    The value in document.body.style.backgroundImage (after assignment) is - url("[objectHTMLImageElement].src")

    The value in document.body.style.backgroundImage (before assignment) is - empty ** There is a background image loaded in CSS so it can't be empty. I'm just looking in the wrong place.

    The value in document.body.style.backgroundImage.src (after assignment) is - undefined

    The value in document.body.style.backgroundImage.src.src (before assignment) is - undefined ** Seems there is no src property.

    The code below creates a pointer to a new (dynamic) image object and loads the static image in the src property of the new image object.

    Code:
    var finance_image = new Array(6);
    for(var i=0; i<finance_image.length; i++) {
    	finance_image[i] = new Image();
    	finance_image[i].src = "images/finance" + i + ".jpg";
    You would think you would just access the object's src property with dot notation and assign that value to the backgroundImage's src property with dot notation, but clearly that's not the case. It seems there is no src property of backgroundImage which makes sense since a static image can be assigned to document.body.style.backgroundImage, no src property is used.

    document.images[0].src = finance_image[i].src works, so the dynamic image can be assigned to the images array. The problem clearly is how to assign a dynamic image to the backgroundImage property of the style object. Just found this --> HTML DOM Style object and this --> HTML DOM Style backgroundImage Property There is no src property of backgroundImage. backgroundImage does have a url property which how an image is assigned. I don't believe the image is stored in an array. backgroundImage may just store a single link to the current image, as it returns a string.

    Why can't a dynamic image be assigned to the backgroundImage property when it can be assigned to the images array? Do you think it can't be be done???

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    function startRotator() {
    	if( counter >= finance_image.length ) {
    		counter = 0;
    	}
    	/*alert("finance_image" + counter + ".src = " + finance_image[counter].src);*/
    	var image = "url(" + finance_image[counter].src+")";
    	counter++;
    	document.body.style.backgroundImage=image;
    	/*alert("document.body.style.backgroundImage.src = " + document.body.style.backgroundImage);*/
    }
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    skydoggie77 (05-12-2014)

  • #5
    New Coder
    Join Date
    May 2014
    Posts
    20
    Thanks
    5
    Thanked 1 Time in 1 Post
    Vic,

    You're a genius!

  • #6
    New Coder
    Join Date
    May 2014
    Posts
    20
    Thanks
    5
    Thanked 1 Time in 1 Post
    This code works, but the dynamic images don't load very well. I get a lot of white backgrounds right from the start, on all browsers.

    I used static images over here --> http://www.codingforums.com/dom-json...-html-tag.html -- and every thing works perfectly except Firefox. The function is triggered by the onload event. The first time the browser loads, everything works great on all browsers. But, for Firefox only, when I go to another page on the site and return to the homepage (it's only running on the homepage), I get some white backgrounds for about three cycles of the function. If I re-boot the browser everything will work perfectly until I go to another page and return to the homepage.

    I don't understand why the Firefox Browser would have problems with this (the images are already cached), but it does.

    I was hoping dynamic images would solve that problem, but no such luck.

    I was going to try CSS Animations, but backgroundImage isn't animatable according to --> CSS background-image property --> and CSS Animatable

    Does anybody know of a workaround?


  •  

    Posting Permissions

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