title: display image in table row
body: <p>I have a requirement on mouse over on the table, image one will display and on mouse over of the image one, a tooltip will display. When I click on tooltip link test, image two has to display inside td and previous image one should hide. </p>
  
  <p>Issue is image two is getting displayed but I can see only if I mouse over on the table. How can I show image two once I click on tooltip link test without mouse over?</p>
  
  <p>Here is the fiddle <a href="http://jsfiddle.net/0w9yo8x6/45/" rel="nofollow">http://jsfiddle.net/0w9yo8x6/45/</a>.</p>
  
  <p><strong>CSS :</strong></p>
  
  <pre><code>td.myData &gt; img  
  {
      display: none;
      float: right;
      height: 19px;
  }
  
  td.myData:hover &gt; img 
  {
      display: inline-block;
  }
  </code></pre>
  
  <p><strong>JavaScript :</strong></p>
  
  <pre><code>function test(data)
  {
      alert('test invoked with data: ' + data);
      var two = document.getElementById('two');
      two.style.visibility = 'visible';
      var one = document.getElementById('one');
      one.style.visibility = 'hidden';
  }
  </code></pre>