admin 管理员组

文章数量: 1086019

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?

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?

  • javascript
  • html
Share Improve this question edited Jun 16, 2011 at 1:40 the Tin Man 161k44 gold badges221 silver badges306 bronze badges asked Jun 16, 2011 at 1:01 PreethiPreethi 2,1627 gold badges38 silver badges54 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 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 acplish 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/roberkules/WRgjv/

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.

本文标签： How can I display an array of images in HTML using javascriptStack Overflow

版权声明：本文标题：How can I display an array of images in HTML using javascript? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744010697a2518095.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。