我正在尝试创建一个网页,其中将列出每张图片的标题。每次将鼠标悬停在标题上时,相应的图片都会显示在其下方的区域中。标题显示,但是当我将标题悬停时,它不显示图像。
由于“ 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="";
}