使用 javascript 在文本鼠标悬停时显示不同的弹出图像

Question

我正在构建一个包含餐厅菜单的页面，该页面将包含几个不同的 html 表格，这些表格将在每个 <tr> 的第一个 <td> 中存储项目名称。我希望当用户将鼠标悬停在项目名称（每个<tr> 中的第一个<td>）上时运行一个javascript 函数，该函数将在与特定项目名称对应的框中显示一个图像弹出窗口。

总共将有大约 40 个不同的项目名称需要具有这种鼠标悬停效果以显示与项目名称相关的图像的快速弹出窗口，然后在悬停效果不再有效时淡出.但是，某些项目名称可能没有可用的图像。

我的问题：

我不确定执行此操作的最佳解决方案是什么或如何执行此操作。我通过 Google 看到了一些不同的技术，它们允许在“鼠标悬停”较小的图像或链接时弹出图像，但是 <td> 中的“鼠标悬停”文本是否也可以这样？

• 我应该只使用这样的东西吗：
  <td onmouseover="popup('<img src='/image/location/image.jpg>'')" onmouseout="popout()">1st Item Name</td>
  然后使用这个：
  <script type="text/javascript"> var pop = document.getElementById('popup'); </script

• 或者是否有可能我可以使用带有 javascript 数组的 (table / td) id 名称来在 <td>'s 中将正确的图像调用到它们各自的名称中

• 或我无法想到/知道的任何其他方式？

这是我到目前为止的表格的 html

    <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>

请说明您将使用或知道执行此任务的方法。还有任何可用于执行此操作或在小弹出窗口中显示图像的 javascript 函数，然后在鼠标移出时消失。

一如既往，感谢您的帮助和洞察力！

Answer 1

我最近对这类事情使用的方法是将数据属性附加到触发事件的元素。所以在这种情况下你的TD。这是描述数据属性使用的 HTML 5 标准的链接

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

你的 td 中可以有这样的东西

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

然后在您的 javascript 中，您将获得如下属性的值：

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

我强烈建议你学习一点 jQuery 来将这一切联系在一起，它会让你的生活变得无比轻松。否则，您可以继续使用纯 JavaScript。

在 jQuery 中（轻松包含褪色框）

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);
    });
});

或者使用纯 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.
}