用鼠标悬停在图像上显示附加信息

Show additional information with onmouseover a image

本文关键字：信息 在图像上显示 鼠标 悬停      更新时间：2023-09-26

我在一个网站上有三个图像，我想使用onmouseover显示每个图像的特定信息。

<!DOCTYPE html> 
<html lang="de"> 
    <head> 
        <meta charset="utf-8"> 
        <title>AJAX</title> 
        <meta name="viewport" content="width=device-width; initial-scale=1.0"> 
        <link rel="stylesheet" type="text/css" href="lib/css/stil.css" /> 
        <script type="text/javascript" src="lib/js/ajaxeinsendeaufgabe2.js"></script> 
   </head> 
   <body> 
       <h1>Zusatzinformationen</h1> 
       <table> 
           <tr> 
               <td><img class="img" src="img/b1.jpg" /></td> 
               <td id="info0"></td> 
           </tr> 
           <tr> 
               <td><img class="img" src="img/b2.jpg" /></td> 
               <td id="info1"></td> 
           </tr> 
           <tr> 
               <td><img class="img" src="img/b3.jpg"/></td> 
               <td id="info2"></td> 
           </tr> 
       </table> 
   </body> 
</html>

我现在需要外部Javascript的帮助。如何通过ID编码元素，以便使用onmouseover显示，例如，第一张图片的info0文本，第二张图片的info1文本和第三张图片的info2文本?

也许这样

     var resOb = new XMLHttpsRequest ();
    window.onload = function() {
document.getElementsByTagName ("img");
function sndReq(0){
    document.getElementById ("info0");
  }
   }  
  switch(i) { 
  case 0: 
 resOb.open('get', 'info0.txt', true); 
  break; 
  case 1: 
 … 
 } 
 resOb.onreadystatechange = function() { 
 handleResponse(i); 
 } 
 document.getElementbyID("info0").innerHTML
 ...

对不起，但我在javascript技能较少

试试这个简单的东西jquery

<div class="someDiv">
    <p>Click me here for mouseover image</p>
</div>
<img style="display:none" class="image" src="http://imgur.com/a/63gbF"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".someDiv").hover(function() {
    $(document).mousemove(function(event) {
        $(".image").css({"position":"absolute","left":event.clientX ,"top":event.clientY }).show();    
    });    
});
//end movement with click on the div.
$(document).bind("click",function(){
    $(document).unbind("mousemove");
    $(".image").hide();
});
</script>
在javascript 

<style>
#parent #popup {
  display: none;
}
#parent:hover #popup {
  display: block;
}
</style>
<div id="parent">
This is the main container.
<div id="popup" style="display: none"><img src="http://imgur.com/a/63gbF"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var e = document.getElementById('parent');
e.onmouseover = function() {
  document.getElementById('popup').style.display = 'block';
}
e.onmouseout = function() {
  document.getElementById('popup').style.display = 'none';
}
</script>
相关文章：