faqts : Computers : Programming : Languages : JavaScript : Tables

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

35 of 39 people (90%) answered Yes
Recently 8 of 10 people (80%) answered Yes

Entry

How can you load an image into a table cell from a link in another cell?

May 1st, 2000 11:25
Martin Honnen, true solutions,


For a NN3+ and IE4+ solution place an IMG element with a transparent 
image in the cell. Then simply set the SRC of the IMG element as needed:

<TABLE BORDER="1">
<TR>
<TD>
<IMG NAME="cellImage" SRC="1x1Transparent.gif" WIDTH="100" HEIGHT="100">
</TD>
<TD>
<A HREF="whatever.gif"
   ONCLICK="document.cellImage.src = this.href; return false;"
>
load image into cell
</A>
</TD>
</TR>
</TABLE>

If you script for IE4+ and NN6 you can dynamically insert an IMG 
element into a cell e.g.

<HTML>
<HEAD>
<SCRIPT>
function loadImageIntoElement (id, url) {
  if (document.all)
    document.all[id].innerHTML = 
      '<IMG SRC="' + url + '">';
  else if (document.getElementById) {
    var el = document.getElementById(id);
    while (el.hasChildNodes())
      el.removeChild(el.lastChild);
    var img = document.createElement('IMG');
    img.src = url;
    el.appendChild(img);
  }
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD ID="imageCell">
</TD>
<TD>
<A HREF="kiboInside.gif"
   ONCLICK="loadImageIntoElement('imageCell', this.href); return false;"
>
load image into cell
</A>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>