Question

我正在构建一个包含餐馆菜单的页面，该菜单将包含几个不同的html表格，这些表格会将项目名称存储在每个<td>的第一个<tr>中。我希望当用户将鼠标悬停在项目名称（每个<td>中的第一个<tr>）上时将运行javascript函数，该函数将在对应于特定项目名称的框中显示图像弹出窗口。

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

我的问题：

我不确定执行此操作或执行此操作的最佳解决方案是什么。我通过Google看到了一些不同的技术，可以在“覆盖”较小的图像或链接时弹出图像，但是<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
或者我是否可以将（table / td）id名称与javascript数组一起用于将正确的图像调用到<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函数可用于执行此操作或在小弹出窗口中显示图像，然后在mouseout上逐渐消失。

一如既往，感谢您的帮助和见解！

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

使用javascript在文本鼠标悬停上显示变化的弹出图像

我的问题：

1 个答案: