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

Question

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

总共将有大约 40 个不同的元素名称需要具有此鼠标悬停效果以显示与元素名称相关的图像的快速弹出，然后在悬停效果不再事件时淡出.不过，某些商品名称可能没有可用图片。

我的问题:

我不确定执行此操作的最佳解决方案是什么或如何执行此操作。我通过谷歌看到了一些不同的技术，当“鼠标悬停”较小的图像或链接时允许弹出图像，但是对于 <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.
}