Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Facebook Sign In with Google Sign In with OpenID

Categories

We have migrated to a new platform! Please note that you will need to reset your password to log in (your credentials are still in-tact though). Please contact lee@programmersheaven.com if you have questions.
Welcome to the new platform of Programmer's Heaven! We apologize for the inconvenience caused, if you visited us from a broken link of the previous version. The main reason to move to a new platform is to provide more effective and collaborative experience to you all. Please feel free to experience the new platform and use its exciting features. Contact us for any issue that you need to get clarified. We are more than happy to help you.

Images into divs using JS

psychofox19psychofox19 Posts: 41Member
I have some Divs with unique id's and I need some javascript code that will populate the content of the div's with images with dynamically generated locations from a for loop and an integer based increment.

The problem I'm having at the moment is being able to add these images to the divs using only Javascript and without any preloaded default images in the divs that I could just manipulate.

I've tried previously to use InnerHtml of a specific document element with no sucess, and now i've tried creating the images as elements and using AppendChild() to add them, but it's not working.

Is there an easy way to load images using only javascript code into the content of the Div (not as the background image, i've already had that mentioned and its pointless)?

I'm trying to get 2 rows of 13 small images populated.

Comments

  • mac_doggiemac_doggie Posts: 488Member
    Try something like this.

    [code]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">







    function Populate() {
    for(var i=1;i<=3;i++) {

    var elm = document.getElementById('div'+i);
    for(var j=0;j<10;j++) {
    var img = document.createElement('img');
    img.src = "../images/image"+j+".png";
    elm.appendChild(img);
    }

    }
    }
    </script>











    Populate()



    [/code]

    I could also recommend downloading an extended javascript framework like mootools or scriptacolous. Those offer a lot of extra javascript features and make things more browser independant.

    good luck with your project

    -mac-
    ;-)
    -mac-
    mailto:mac_doggie@hotmail.com
    the Netherlands...
Sign In or Register to comment.