使用innerHTML在悬停时显示图像图例（而不是工具提示）？

时间：2022-08-26 23:48:42

I have a webpage with many images, each of which has a title attribute. When I hover over the image, I want the title text to display in a separate legend element I have created (not as a tiny hover tooltip). I have a mouseover function which works fine - i.e. when I hover over the image the legend changes value. But I want that value to be the title text of the individual image - which I don't know how to access. I have tried …innerHTML = this.title which is obviously incorrect.

我有一个包含许多图像的网页，每个图像都有一个title属性。当我将鼠标悬停在图像上时，我希望标题文本显示在我创建的单独的图例元素中（而不是作为微小的悬停工具提示）。我有一个鼠标悬停功能，它工作正常 - 即当我将鼠标悬停在图像上时，图例会改变值。但我希望这个价值成为单个图像的标题文本 - 我不知道如何访问。我试过...... innerHTML = this.title这显然是不正确的。

[The number of images is large and changing (like an album), so I can't add separate code for each <img> tag. I can use alt or any other <img> attribute to make this work. I'm not wedded to the innerHTML method, either, but am hoping for some simple code to do the trick!]

[图像数量很大且不断变化（如相册），因此我无法为每个使用innerHTML在悬停时显示图像图例（而不是工具提示）？标签添加单独的代码。我可以使用alt或任何其他使用innerHTML在悬停时显示图像图例（而不是工具提示）？属性来完成这项工作。我也没有结合innerHTML方法，但我希望有一些简单的代码来做这个伎俩！]

Please help? Thanks! (FYI, I'm a novice coder.)

请帮忙？谢谢！ （仅供参考，我是新手编码员。）

<!DOCTYPE html>
<html>
<body>

  <h1 id="legend">title appears here</h1>

  <div>
    <img src="image1.jpg" onmouseover="mouseOver()" title="Breakfast">
    <img src="image2.jpg" onmouseover="mouseOver()" title="Lunch">
    <img src="image3.jpg" onmouseover="mouseOver()" title="Dinner">
  </div>

  <script>
    function mouseOver() {
        document.getElementById("legend").innerHTML = this.title;
    }
  </script>

</body>
</html>

2 个解决方案

#1

1  

It looks like you are trying to use this.title to represent the different images? If you want their titles to appear in the <h1> tag you need to pass the information to the function shown below.

看起来你正试图用this.title来表示不同的图像？如果您希望其标题出现在

标记中，则需要将信息传递给下面显示的函数。

 <h1 id="legend">title appears here</h1>

  <div>
    <img src="image1.jpg" onmouseover="mouseOver(this)" title="Breakfast">
    <img src="image2.jpg" onmouseover="mouseOver(this)" title="Lunch">
    <img src="image3.jpg" onmouseover="mouseOver(this)" title="Dinner">
  </div>

  <script>
    function mouseOver(x) {
        document.getElementById("legend").innerHTML = x.title;
    }
  </script>

#2

0  

I guess its helpful .

我觉得它很有帮助。

But i use Jquery just need call this code in your <head>

但是我使用Jquery只需要在你的中调用这段代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <!DOCTYPE html>
    <html>
    <head>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    </head>
    <body>

      <h1 id="legend">title appears here</h1>

      <div>
        <img src="image1.jpg" class="class_of_div" title="Breakfast">
        <img src="image2.jpg" class="class_of_div" title="Lunch">
        <img src="image3.jpg" class="class_of_div" title="Dinner">
      </div>

      <script>
        $(document).on('mouseover', '.class_of_div', function () {
            var thiss=$(this);
            $('#legend').text(thiss.attr('title'));
        });
      </script>

    </body>
    </html>

#1

1  

It looks like you are trying to use this.title to represent the different images? If you want their titles to appear in the <h1> tag you need to pass the information to the function shown below.

看起来你正试图用this.title来表示不同的图像？如果您希望其标题出现在

标记中，则需要将信息传递给下面显示的函数。

 <h1 id="legend">title appears here</h1>

  <div>
    <img src="image1.jpg" onmouseover="mouseOver(this)" title="Breakfast">
    <img src="image2.jpg" onmouseover="mouseOver(this)" title="Lunch">
    <img src="image3.jpg" onmouseover="mouseOver(this)" title="Dinner">
  </div>

  <script>
    function mouseOver(x) {
        document.getElementById("legend").innerHTML = x.title;
    }
  </script>

#2

0  

I guess its helpful .

我觉得它很有帮助。

But i use Jquery just need call this code in your <head>

但是我使用Jquery只需要在你的中调用这段代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <!DOCTYPE html>
    <html>
    <head>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    </head>
    <body>

      <h1 id="legend">title appears here</h1>

      <div>
        <img src="image1.jpg" class="class_of_div" title="Breakfast">
        <img src="image2.jpg" class="class_of_div" title="Lunch">
        <img src="image3.jpg" class="class_of_div" title="Dinner">
      </div>

      <script>
        $(document).on('mouseover', '.class_of_div', function () {
            var thiss=$(this);
            $('#legend').text(thiss.attr('title'));
        });
      </script>

    </body>
    </html>
标签：

相关文章