Images into divs using JS - Programmers Heaven

Howdy, Stranger!

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

Categories

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:[email protected]
    the Netherlands...
Sign In or Register to comment.