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

Question

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

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

我的问题：

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

• 我应该使用这样的东西吗：
  第一个项目名称
  然后使用这个：
  <脚本类型=“text/javascript”> var pop = document.getElementById('popup');

• 或者我是否可以使用（表/td）id名称和javascript数组来将正确的图像调用到中各自的名称中的

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

这是我到目前为止的表的 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.
}