Question

我在网站上有三张以这种方式生成的图片：

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

我的问题：当我用鼠标移动三个图像中的一个时，我如何显示文字。每张图片必须显示唯一的文字。

以下是本守则的不完整部分：

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 个答案: