Question

我想出了如何通过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>

Answer 1

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

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

如果你想使用JQuery那么

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

希望它会帮助你

Answer 2

为每张图片添加数据属性：

<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");
};

现在你只需要一个描述div。

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

2 个答案: