Search code examples
javascriptimagehtml4

Javascript - how to position image in a table

I am trying to position a 'random' image into a table column. Basically, I select the image based on the second that the the page is loaded - so 60 images available. The image selects and displays but locates itself at the page edge rather then the table edge.

I am going round in circles. Any hints on how to achieve this please? I am writing in HTML4 - I know very little about HTML5. The image width size is 480px, the column width in the table is 615px.

Here is my code.. with some debugs commented out.

Thanks Martyn


Introduction 

<script>

var d = new Date();
var n = d.getSeconds();
var n = "hdrimages/"+n+".jpg"
var img = document.createElement("img");
img.src = n

//document.getElementById("hdrimage").innerHTML = img.src;
//document.getElementById("hdrimage").style.cssFloat = "right";
//hdrimage.style.float = “right”;

document.body.appendChild(img);

</script>


</td>
<td width="40%" align="left" valign="top"> 
<h2>Upcoming Events</h2>
<hr>
<h2>News</h2></td>
Solution

  • you can do something like following 

    <table>
  <tr>
    <td id="img-cell"></td>
  </tr>
</table>

    and on JS part you can do

    document.getElementById('img-cell').appendChild(img);