Вопрос:

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

javascript

127 просмотра

1 ответ

25 Репутация автора

У меня есть три изображения на веб-сайте, и я хочу показать конкретную информацию для каждого изображения с помощью 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. Как я могу кодировать элементы по идентификатору, чтобы показать, используя 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

Автор: Marco Источник Размещён: 22.08.2016 09:38

Ответы (1)


0 плюса

450 Репутация автора

Решение

попробуйте эту простую вещь 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>
Автор: Aswad Shaik Размещён: 22.08.2016 09:51
Вопросы из категории :
32x32