Блог

Я пытаюсь создать веб-страницу, на которой будут перечислены подписи к каждому изображению. Каждый раз, когда вы наводите курсор мыши на заголовок, в области под ним будет отображаться соответствующее изображение. Заголовок отображается, но при наведении курсора на заголовок изображение не отображается.

Поскольку объект ‘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 amp;amp; asynchrequest.status == 200) {
      document.getElementById("info").innerHTML = asynchrequest.responseText;
    }
  };
  asynchrequest.open("GET", infopage, true);
  asynchrequest.send();
}


function clearContent() {

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

}