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

Display a varying popup image on text mouseover with javascript

提问by ityler22

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.

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

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.

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

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

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

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

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

• 我应该使用这样的东西：
  <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

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

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

Here is the html I have so far for the table(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>

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.

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

As always, Thanks for your help and insight!

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

回答by James Hay

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

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

http://www.w3.org/TR/html5/elements.html#embedding-custom-non-visible-data-with-the-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 中有这样的东西

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

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

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

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.

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

in jQuery (includes fading box easily)

在 jQuery 中（包括容易褪色的框）

HTML

HTML

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

jQuery

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

或者在普通的javascript中

HTML

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

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