使用javascript在文本鼠标悬停上显示不同的弹出图像 [英] Display a varying popup image on text mouseover with javascript

问题描述

我正在建立一个具有餐馆菜单的页面，该菜单将包含几个不同的html表，将在第一个< td> code>< tr> 。我想要一个javascript函数运行时，用户将鼠标悬停在项目名称（第<< td> 在每个< tr& ），将在与特定项目名称对应的框中显示图像弹出窗口。

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.

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

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.

可能的解决方案是执行此操作或如何执行此操作。我通过Google看到了一些不同的技术，当鼠标移动较小的图像或链接时，允许图像弹出，但在中的鼠标悬停文本; td> ？

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

• 我应该使用这样的东西：
  
  < td onmouseover =popup（'< img src ='/ image / location / image.jpg>''）onm​​ouseout =popout（）>第一项名称< / td>
  
  然后使用：
  
  < script type =text / javascript>
var pop = document.getElementById（'popup'）; < / script

或使用javascript数组调用< td>的

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

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

Here is the html I have so far for the table(s)

    <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函数，然后鼠标悬停。

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.

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

推荐答案

我最近使用这种方式的方式是将一个data-attibute附加到触发事件的元素。所以在这种情况下你的TD。这是指向HTML 5标准的链接，用于描述数据属性的使用

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

http://www.w3.org/TR/html5/elements.html#embedding-custom-不可见数据与数据属性

在td中可能有类似这样的东西

You could have something like this in your td

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

然后在你的javascript中你可以得到属性的值：

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

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

我强烈建议你学习一点jQuery来链接这一切是否会使你的生活无限更轻松。否则，您可以继续使用简单的javascript。

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中轻松包含渐变框

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

这篇关于使用javascript在文本鼠标悬停上显示不同的弹出图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！