使用javascript在文本鼠标上方显示不同的弹出图像

我正在构建一个包含餐厅菜单的页面，该页面将由几个不同的html表格组成，这些表格将在每个

中的第一个

中存储项目名称。我希望在用户将鼠标悬停在项目名称（每个

中的第一个

）上时运行javascript函数，该名称将在对应于特定项目名称的框中显示图像弹出窗口

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

我的问题: 我不确定执行此操作的最佳解决方案是什么，或者如何执行此操作。我在谷歌上看到过一些不同的技术，它们允许在“鼠标悬停”较小的图像或链接时弹出图像，但在

中的文本上“鼠标悬停”时也可以这样做吗

• 我是否应该这样使用：
  

  第一个项目名称

  
  然后使用这个：
  

  
  var pop=document.getElementById（'popup'） 我最近在处理这类事情时使用的方法是在触发事件的元素中附加一个data-attibute。所以在这种情况下，你的TD。下面是HTML5标准的链接，该标准描述了数据属性的使用
  
  
  你的td中可以有类似的东西
  
  <td data-imgsrc="imgfoler/specificimg.jpg">The item name</td>
  
  我强烈建议您学习一点jQuery来将这一切联系在一起，因为它将使您的生活更加轻松。否则，您可以继续使用纯javascript
  
  在jQuery中（轻松包含淡入框）
  
  HTML
  
  或使用普通javascript
  
  HTML
  
  “我在谷歌看到了一些不同的技术，允许在“鼠标悬停”较小的图像或链接时弹出图像，但在“鼠标悬停”中的文本时也可以这样做吗？”-是的，完全相同的代码应该适用于td（或div或span或任何其他元素类型）。感谢您的回复！我见过JQuery的使用，只是我自己从来没有深入使用过它。现在我的理解是，在加载其他所有内容（图像、横幅等）之前，Jquery无法开始加载。如果我要在TD中使用
  data imgsrc=“imgfolder/image.jpg”
  ，在鼠标悬停效果开始工作之前，页面中引用的所有图像是否都必须在后台“加载”？再次感谢您的帮助，我将继续深入研究Jquery。确实，如果您想立即加载图像，必须在后台加载，但这不是Jquery特有的，因为对于普通javascript也需要这样做。jQuery可以在加载所有内容之前使用（只要加载了jQuery），它就是$（document）.ready（）函数，它是一个安全网，可以防止您操作尚不存在的DOM元素。这里有一篇关于在文档就绪状态之前使用jQuery的好文章，正如我在回答中所说的，如果您想使用jQuery。让它在本机javascript中适用于所有浏览器是令人沮丧的。相信我，我已经试过了。当然jQuery不是你唯一的选择，有很多不同的框架可以为你做一些很酷的事情，比如褪色。Prototype、MooTools等，但我个人认为，jQuery的学习曲线最小。是的，你肯定说服我继续使用jQuery，主要是因为无论是通过这个项目还是其他项目，它似乎都能为你节省时间。在函数中，当您引用图像元素的img id时，您是什么意思？

  我应该设置一个
  还是需要一个html div设置来正确显示图像。我试着在“你的图像”元素的

  'img#id_

  内部使用

  'td'

  ，所有td在鼠标上方逐渐消失，没有图像显示，当鼠标指针未激活时不会返回。我理解它为什么不起作用，但我不确定该在那里使用什么。你的图像的

  img\id\u是你想要显示图像的实际位置的id。如果您希望它是一个弹出窗口，那么它可能是一个包含在绝对定位div中的图像元素或类似的东西。如果您添加html以显示图像显示的元素，我将附加我的答案以显示您将如何执行此操作。
  <td data-imgsrc="imgfoler/specificimg.jpg">The item name</td>
  
  var imgsrc = element.getAttribute('data-imgsrc');
  
  <td data-imgsrc="imgfoler/specificimg.jpg">The item name</td>
  
  $(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);
      });
  });
  
  // You need to add an onclick handler on every td
  <td data-imgsrc="imgfoler/specificimg.jpg" onmouseover="swapimg(this);">
      The item name
  </td>
  
  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.
  }