Показать дополнительную информацию с onmouseover image

У меня есть три изображения на веб-сайте, и я хочу показать конкретную информацию для каждого изображения с помощью onmouseover.Показать дополнительную информацию с onmouseover image

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

источник

2016-08-22 Marco

будет javascript not 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>

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

источник

2016-08-22 21:51:05

Показать дополнительную информацию с onmouseover image

ответ

Смежные вопросы