title: Display a varying popup image on text mouseover with JavaScript
body: <p>I am building a page with a restaurant menu that will consist of a few different html tables that will store the item name in the first <code>&lt;td&gt;</code> in each <code>&lt;tr&gt;</code>. I would like a JavaScript function to run when the user hovers the mouse over the item name (the first <code>&lt;td&gt;</code> in each <code>&lt;tr&gt;</code>) that will display an image popup in a box that corresponds to the particular item name.</p>
  <p>All together there will be roughly 40 different item names that need to have this mouse-over effect to display a quick pop up of the image that relates to the item name and then fade back out when the hover effect is no longer active. Some item names may not have an image available though.</p>
  <h2>My question:</h2>
  <p>I am unsure what the best possible solution is to perform this or how to go about performing this. I have seen a few different techniques through Google that allow a image pop up when &quot;mousing-over&quot; a smaller image or a link, but would the same be possible with &quot;mousing-over&quot; text in a <code>&lt;td&gt;</code>?</p>
  <ul>
  <li><p><strong>Should I just use something like this:</strong><br />
  <code>&lt;td onmouseover=&quot;popup('&lt;img src='/image/location/image.jpg&gt;'')&quot; onmouseout=&quot;popout()&quot;&gt;1st Item Name&lt;/td&gt;</code><br />
  Then use this:<br />
  <code>&lt;script type=&quot;text/javascript&quot;&gt; var pop = document.getElementById('popup'); &lt;/script</code></p>
  </li>
  <li><p><strong>Or</strong> is it possible I could use (table / td) id names with a javascript array to call the correct images into their respective names in the <code>&lt;td&gt;'s</code></p>
  </li>
  <li><p><strong>Or</strong> any other way that I am unable to think of / know about?</p>
  </li>
  </ul>
  <p>Here is the html I have so far for the table(s):</p>
  <pre><code>    &lt;div id=&quot;first_food_table&quot;&gt;
      &lt;table border=&quot;0&quot; bordercolor=&quot;&quot; style=&quot;background-color:&quot; width=&quot;750&quot;&gt;
      &lt;tr&gt;
        &lt;td&gt;1st item name&lt;/td&gt; &lt;!--Image popup should be displayed when mouse-over text--&gt;
        &lt;td&gt;blah&lt;/td&gt;
        &lt;td&gt;blahblah&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;2nd item name&lt;/td&gt;&lt;!-- Different image popup here as well --&gt;
        &lt;td&gt;blah&lt;/td&gt;
        &lt;td&gt;blahblah&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;3rd item name&lt;/td&gt; &lt;!-- Again a different image popup here as well--&gt;
        &lt;td&gt;blah&lt;/td&gt;
        &lt;td&gt;blahblah&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;4th item&lt;/td&gt; &lt;!-- And so on and so forth --&gt;
        &lt;td&gt;blah&lt;/td&gt;
        &lt;td&gt;blahblah&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;        
      &lt;/div&gt; 
      &lt;div id=&quot;second_food_table&gt;
      &lt;table&gt;
      &lt;tr&gt;
        &lt;td&gt;1st item name&lt;/td&gt;
        &lt;td&gt;Table Cell&lt;/td&gt;
        &lt;td&gt;Table Cell&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;2nd item name&lt;/td&gt;
        &lt;td&gt;Table Cell&lt;/td&gt;
        &lt;td&gt;Table Cell&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;3rd item name&lt;/td&gt;
        &lt;td&gt;Table Cell&lt;/td&gt;
        &lt;td&gt;Table Cell&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;4th item name&lt;/td&gt;
        &lt;td&gt;Table Cell&lt;/td&gt;
        &lt;td&gt;Table Cell&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
      &lt;/div&gt;
  </code></pre>
  <p>Please explain which method you would use or you know of to perform this task. Also any JavaScript functions that are available to perform this or to display the image in a small popup window that will then fade away on mouseout.</p>