使用javascript在文本鼠標懸停時顯示變化的彈出圖像

Question

我正在建立一個帶有餐廳菜單的頁面，該餐廳菜單將包含一些不同的html表，這些表會將項目名稱存儲在每個<tr>的第一個<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函數，然后在鼠標移開時就會消失。

與往常一樣，感謝您的幫助和見識！

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