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?
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 badges2 Answers
Reset to default 4You 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.