title: Onclick Javascript Function to adding image
body: <p>I am trying to add a function that when a customer click on the small thumbnail, it adds an image.  see code below.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;script type="text/javascript"&gt;
  &lt;!--
  
  function addimage2() { 
        var img = document.createElement("img");
        img.src = "swatch.jpg"; 
        img.height = 75; 
        img.width = 113;
        img.style.top=800;
        img.style.right=100;
        document.body.appendChild(img);
      }
  
  
  
  //--&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
      &lt;tr&gt;
         &lt;td width="43%" rowspan="2"&gt;&lt;img src="tuffet-diagram.jpg" width="270" height="326"&gt;&lt;/td&gt;
        &lt;td width="57%" height="162"&gt;Zone 1:&lt;/td&gt;
     &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Zone 2: &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
       &lt;td colspan="2"&gt;Zone 1 color:
       &lt;img src="swatch-sm.jpg" alt="swatch-sm" onClick="addimage2();"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
       &lt;td colspan="2"&gt;Zone 2 color:&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>it keeps adding next to the thumbnail and not where the specify location such as when a customer click on Zone1 swatch, it should add to the Zone 1 area, etc.</p>
  
  <p>here's the link to my page:  <a href="http://www.manufacturingsolutionscenter.org/salma/tuffet-color.html" rel="nofollow">http://www.manufacturingsolutionscenter.org/salma/tuffet-color.html</a></p>
  
  <p>Thank you.</p>