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?
2 answers
solution1
3 ACCPTED 2011-06-16 01:10:35
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):
solution2
0 2011-06-16 01:09:50
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.