Javascript XMLHttpRequest鼠标悬停事件侦听器

时间:2019-03-24 00:13:34

标签: javascript

我正在尝试创建一个网页,其中将列出每张图片的标题。每次将鼠标悬停在标题上时,相应的图片都会显示在其下方的区域中。标题显示,但是当我将标题悬停时,它不显示图像。

由于“ XMLHTTPRequest”对象难以识别图片。我创建了一个非常简单的网页,其中一行包含<img>标签,其中列出了图片的位置。 (例如<img src="img/cacao.jpg" alt="" id="cacao1">),因此“ XMLHTTPRequest”对象将查找HTML页面而不是* .jpg文件。因此,在cacao1.html,cacao2.html,cacao3.html和cacao4.html中,<img>标签只有一行。

Chocolate1,Chocolate2,Chocolate3和Chocolate4是我的标题。

这是我的Javascript。

window.addEventListener("load", registerListeners, false);
var asynchrequest;

function registerListeners() {

    var img;
    img=document.getElementById("chocolate1");
    img.addEventListener("mouseover", function () { getContent ("cacao1.html");}, false);
    img.addEventListener("mouseout", clearContent, false);
    img=document.getElementById("chocolate2");
    img.addEventListener("mouseover", function () { getContent("cacao2.html");}, false);
    img.addEventListener("mouseout", clearContent, false);
    img=document.getElementById("chocolate3");
    img.addEventListener("mouseover", function () { getContent("cacao3.html");}, false);
    img.addEventListener("mouseout", clearContent, false);
    img=document.getElementById("chocolate4");
    img.addEventListener("mouseover", function () { getContent("cacao4.html");}, false);
    img.addEventListener("mouseout", clearContent, false);
}

function getContent(infopage) {

        asynchrequest= new XMLHttpRequest();
        asynchrequest.onreadystatechange = function() {
    if (asynchrequest.readyState == 4 && asynchrequest.status == 200) {
      document.getElementById("info").innerHTML = asynchrequest.responseText;
    }
  };
  asynchrequest.open("GET", infopage, true);
  asynchrequest.send();
}


function clearContent() {

    document.getElementById("info").innerHTML="";

}

0 个答案:

没有答案