Display a varying popup image on text mouseover with javascript

Question

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 <td> in each <tr> . I would like a javascript function to run when the user hovers the mouse over the item name(the first <td> in each <tr> ) that will display an image popup in a box that corresponds to the particular item name.

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.

My question:

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 "mousing-over" a smaller image or a link, but would the same be possible with "mousing-over" text in a <td> ?

• Should I just use something like this:
  <td onmouseover="popup('<img src='/image/location/image.jpg>'')" onmouseout="popout()">1st Item Name</td>
  Then use this:
  <script type="text/javascript"> var pop = document.getElementById('popup'); </script

• Or 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 <td>'s

• Or any other way that I am unable to think of / know about?

Here is the html I have so far for the table(s)

    <div id="first_food_table">
    <table border="0" bordercolor="" style="background-color:" width="750">
    <tr>
      <td>1st item name</td> <!--Image popup should be displayed when mouse-over text-->
      <td>blah</td>
      <td>blahblah</td>
    </tr>
    <tr>
      <td>2nd item name</td><!-- Different image popup here as well -->
      <td>blah</td>
      <td>blahblah</td>
    </tr>
    <tr>
      <td>3rd item name</td> <!-- Again a different image popup here as well-->
      <td>blah</td>
      <td>blahblah</td>
    </tr>
    <tr>
      <td>4th item</td> <!-- And so on and so forth -->
      <td>blah</td>
      <td>blahblah</td>
    </tr>
    </table>        
    </div> 
    <div id="second_food_table>
    <table>
    <tr>
      <td>1st item name</td>
      <td>Table Cell</td>
      <td>Table Cell</td>
    </tr>
    <tr>
      <td>2nd item name</td>
      <td>Table Cell</td>
      <td>Table Cell</td>
    </tr>
    <tr>
      <td>3rd item name</td>
      <td>Table Cell</td>
      <td>Table Cell</td>
    </tr>
    <tr>
      <td>4th item name</td>
      <td>Table Cell</td>
      <td>Table Cell</td>
    </tr>
    </table>
    </div>

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.

As always, Thanks for your help and insight!

Answer 1

The way I have been using recently for these sort of things is to append a data- attibute to the element that is firing the event. So in this case your TD. Here is a link to the HTML 5 standard which describes the use of data attributes

http://www.w3.org/TR/html5/elements.html#embedding-custom-non-visible-data-with-the-data-attributes

You could have something like this in your td

<td data-imgsrc="imgfoler/specificimg.jpg">The item name</td>

Then in your javascript you get the value of the attribute like this:

var imgsrc = element.getAttribute('data-imgsrc');

I strongly recommend you learn a bit of jQuery to link this all together is it will make your life infinitely easier. Otherwise you can continue on in plain javascript.

in jQuery (includes fading box easily)

HTML

<td data-imgsrc="imgfoler/specificimg.jpg">The item name</td>

jQuery

$(document).ready(function(){
    $('td[data-imgsrc]').mouseenter(function() {
        var imgsrc = $(this).attr('data-imgsrc');
        $('img#id_of_your_image_element').attr('src',imgsrc).show();
    });
    $('td[data-imgsrc]').mouseleave(function() {
        $('img#id_of_your_image_element').fadeOut(200);
    });
});

Or in plain javascript

HTML

// You need to add an onclick handler on every td
<td data-imgsrc="imgfoler/specificimg.jpg" onmouseover="swapimg(this);">
    The item name
</td>

JS

function swapimg(element) {
    var imgsrc = element.getAttribute('data-imgsrc');
    var imgelement = document.getElementById('id_of_your_image_element');
    imgelement.setAttribute('src',imgsrc);

    // No fading out here, if you want fading just use jQuery. Fading
    // in native JS is a pain in the behind.
}