title: Show image on mouse over for elements of a table
body: <p>I have a table of my favourite movies. I would like to display the poster of the movie when the user hovers over the name of the movie. I managed to do it for one element:</p>
  
  <pre><code>&lt;body&gt;
      &lt;h2&gt; My Top 10 Movies &lt;/h2&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;th&gt;Rank&lt;/th&gt;
              &lt;th&gt;Title&lt;/th&gt;
              &lt;th&gt;Director&lt;/th&gt;
              &lt;th&gt;Year&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;01&lt;/td&gt;
              &lt;td onmouseover="imageAppear()" onmouseout="imageDisappear()"&gt;Drive&lt;img src="http://upload.wikimedia.org/wikipedia/en/1/13/Drive2011Poster.jpg" id="place-holder-1" style="zindex: 100; position: absolute; visibility: hidden;"/&gt;&lt;/td&gt;
              &lt;td&gt;Nicolas Winding Refn&lt;/td&gt;
              &lt;td&gt;2011&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
      &lt;script&gt;
      function imageAppear() { 
      document.getElementById('place-holder-1').style.visibility = "visible";}
  
      function imageDisappear() { 
      document.getElementById('place-holder-1').style.visibility = "hidden";}
  
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>My question is, how can I do the same for multiple items without writing X functions for each of my movie? I tried using classes, but it does not seem to work (and even if it does, it would show all the pictures when the user hovers over any of the titles).</p>