Question

我在网站上有三个图像，我想使用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技能较少

Answer 1

尝试这个简单的事情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>

使用onmouseover图像显示其他信息

1 个答案: