onmouseover로 추가 정보 표시

웹 사이트에 3 개의 이미지가 있으며 onmouseover를 사용하여 모든 단일 이미지에 대한 특정 정보를 표시하고 싶습니다.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>

나는 외부 자바 스크립트에 대한 도움이 필요하다. onmouseover를 사용하여 표시하려면 어떻게 ID로 요소를 코딩 할 수 있습니까? 예를 들어 첫 번째 이미지의 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 
...

죄송합니다,하지만 난

출처

2016-08-22 Marco

은 javascript가 아니고 PHP는 – developerwjk

@developerwjk 예, 당연히 – Marco

팁이 있습니다. https://jqueryui.com/tooltip/ –

이 간단한 일이 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>

자바 스크립트에서

<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>

출처

2016-08-22 21:51:05

onmouseover로 추가 정보 표시

답변

관련 문제