2016-09-08 71 views
0

圖像鼠標懸停後的信息,我有三個圖片上所產生的這樣一個網站:顯示使用Ajax

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

我的問題:如何顯示的文字時,我用鼠標移動三個圖像之一。每個圖像必須顯示獨特的文字。

這裏是代碼的一個不完整的部分:

var resOb = new XMLHttpsRequest(); 
window.onload = function() { 
document.getElementsByTagName("img").onmouseover = 
function sndReq(i){ 
switch (i) { 
case 0: 
resOb.open('get', 'info0.txt', true); 
break; 

case 1: 
resOb.open('get', 'info1.txt', true); 
break; 


case 2: 
resOb.open('get', 'info2.txt', true); 
break; 

resOb.onreadystatechange = function(){ 
    handleResponse (i); 
} 

怎樣才能使用onmouseover事件的每個圖像的文本信息?

+0

您的意思是當我將鼠標懸停在img/b1.jpg上時,它將顯示? –

+0

@MannanBahelim是的 – Marco

回答

0
<table> 
     <tr> 
      <td> 
       <img class="img" src="img/b1.jpg" data-id='0'/> 
      </td> 
      <td id="info0"></td> 
     </tr> 
     <tr> 
      <td> 
       <img class="img" src="img/b2.jpg" data-id='1'/> 
      </td> 
      <td id="info1"></td> 
     </tr> 
     <tr> 
      <td> 
       <img class="img" src="img/b3.jpg" data-id='2'/> 
      </td> 
      <td id="info2"></td> 
     </tr> 
    </table> 





$(".img").mouseover(function() { 
     var resOb = new XMLHttpsRequest(); 
     resOb.open('get', 'info'+ $(this).attr('data-id') +'.txt', true); 
    }); 
+0

而我如何編輯信息? – Marco

+0

您的信息來自.txt文件。對 ?所以你可以改變文件的文本,但不要更改文件名。即[信息{我} .txt] –

+0

你能告訴我代碼作爲外部js腳本嗎? – Marco