Отображать различные всплывающие изображения при наведении курсора на текст с помощью JavaScript

Question

Я создаю страницу с меню ресторана, которая будет состоять из нескольких различных html-таблиц, в которых имя элемента будет сохранено в первом <td> в каждом <tr>. Я хотел бы, чтобы функция javascript запускалась, когда пользователь наводит курсор мыши на имя элемента (первое <td> в каждом <tr>), которое будет отображать всплывающее окно с изображением в поле, которое соответствует конкретному имени элемента.

Всего будет примерно 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

• Или возможно ли использование имен таблиц / таблиц идентификаторов с массивом 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>

* 1008 может быть что-то подобное. Тогдав вашем 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.
}