在Javascript中更改鼠标点击/鼠标悬停时的文本和图像

Change text and image on mouseclick/mouseover in Javascript

本文关键字：鼠标 悬停 文本 图像 Javascript      更新时间：2023-09-26

我想出了如何通过javascript改变鼠标悬停的图像。但无法确定如何在鼠标悬停/鼠标点击各自图像上的图像下方添加描述。我不擅长jQuery。请帮我解决这个问题在javascript中。

<html>
 <head>
  <style>
     .imgStyle {
         height: 100px;
            width: 100px;
            border: 3px solid grey;
      }
  </style>
</head>
<body>
   <img src="img/img_01.jpg" id="mainImage" />
   <div id="describ01" style="display:none">Description 01</div>
   <div id="describ02" style="display:none">Description 02</div>
   <div id="describ03" style="display:none">Description 03</div>
   <div id="describ04" style="display:none">Description 04</div>
   <br />
    <div id="myDiv" onmouseover="changeImage(event)">
       <img src="img/img_02.jpg" class="imgStyle" />
       <img src="img/img_03.jpg" class="imgStyle" />
       <img src="img/img_04.jpg" class="imgStyle" />
       <img src="img/img_05.jpg" class="imgStyle" />
    </div>
    <script type="text/javascript">
        function changeImage(event) {
        event = event || window.event;
         var targetElement = event.target || event.srcElement;
        if(targetElement.tagName == "IMG") {
       document.getElementById("mainImage").src = targetElement.getAttribute("src");
        }
       }
     </script>
   </body>
  </html>

如果你想使用javascript，那么答案将是

document.getElementById("description").innerHTML = 'Hello World';

如果你想使用JQuery，那么

 $("#description").html("Hello World");

希望对你有帮助

给每个图片一个data属性:

<img src="img/img_02.jpg" class="imgStyle" data-text='text goes here' />

然后在悬停时使用:

if(targetElement.tagName == "IMG") {
  document.getElementById("mainImage").src = targetElement.getAttribute("src");
  document.getElementById("description").innerHTML = this.getAttribute("data-text");
};

现在你只需要一个描述符

相关文章：