How can I display an array of images in HTML using javascript?

Question

I am trying to create a contacts page and trying to populate the contacts image and name. I am able to display the array of names but not the array of pictures. Just the first picture is displayed.

I am also trying to align the contact and the image in one row. But the contact image is displayed first then the contact name is displayed.

Here goes the code:

<script language="javascript" type="text/javascript">

function showContacts()
{
    var myContacts=["abc","def","xyz"]; // literal array

    for (var i=0;i<myContacts.length;i++)
    {
        document.getElementById('contact').innerHTML += myContacts[i]+"<br>";
        //document.write(myArray[i]);
    }
}
function preloader() 
{
    var myPhoto=["some photos"]; // literal array
    // create object
    var img=document.getElementById('photo');
    // start preloading
    for(var i=0; i< myPhoto.length; i++) 
    {
        img.src += myPhoto[i]+"<br>";
        //document.write(i);
        //img.setAttribute('src',myPhoto[i]); 
     }
 } 

</SCRIPT>


<body onload="showContacts();preloader();">

<table width="100%" style="height: 100%;" border="0"><tr>
    <col colspan="1" ><image id="photo"/>

    <col  colspan="1" ><p id="contact"/>

</tr></table>
</body>
</html>

What am I missing?

roberkules · Accepted Answer · 2011-06-16 01:29:13Z

4

You need to add multiple images to the page. You can do that in javascript.

<table width="100%" style="height: 100%;" border="0">
  <tr>
    <td><p id="photos" /></td>
    <td><p id="contacts" /></td>
  </tr>
</table>


var container = document.getElementById("photos");

for (var i=0, len = myPhoto.length; i < len; ++i) {
     var img = new Image();
     img.src = myPhoto[i];
     container.appendChild(img);
}

UPDATE: this is a simple demo how to add multiple images to the DOM. What you probably want to achieve is that you have multiple table rows with one name & image per row. To accomplish that, you have to create/append new rows/cells using document.createElement (or a framework like jQuery).

UPDATE 2 - added a demo which adds multiple rows (one per contact):

http://jsfiddle.net/roberkules/WRgjv/

edited Jun 16, 2011 at 1:29

answered Jun 16, 2011 at 1:10

roberkules

6,6052 gold badges46 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Preethi Over a year ago

thanks :) worked perfectly fine . Just the one which i needed .

RobG · Accepted Answer · 2011-06-16 01:16:39Z

0

Your HTML is invalid, you need something like:

<table>
  <colgroup>
    <col ...>
  <colgroup>
    <col ...>
  <tr>
    <td><img id="image0" ...>
    <td><p id="contact0" ...>
  <tr>
    <td><img id="image1" ...>
    <td><p id="contact1" ...>
  ...
</table>

Read the HTML 4.01 specification for table elements and use the W3C validator to check markup.

The "preloader" script is not doing what you might think, roberkules' answer is on the right track.

edited Jun 16, 2011 at 1:16

answered Jun 16, 2011 at 1:09

RobG

148k32 gold badges180 silver badges216 bronze badges

Collectives™ on Stack Overflow

How can I display an array of images in HTML using javascript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related