Question

我想要的是，当按下图像的特定区域时，将显示包含与该区域匹配的特定文本的通用div .info-box。

以下是使用的XML示例：

<?xml version="1.0"?>
<exhibitors>

  <exhibitor divid="stand1">
    <name> Example1 </name>
    <imgurl>images/ex1.png</imgurl>
    <bio>bla bla ..</bio>
  </exhibitor>

  <exhibitor divid="stand2">
    <name>Example2</name>
    <imgurl>images/ex2.png</imgurl>
    <bio>bla bla </bio>
  </exhibitor>
</exhibitors>

以下是正在使用的HTML示例：

<div class="info-box">
  <div class="row">
    <div class="col-xs-7 col-sm-9">
      <h4 id="title"></h4>
    </div>
    <div class="col-xs-3 col-sm-3"><img src=""></div>
  </div>
  <p></p>
</div>

<div class="floor-map">
  <img src="images/floormap.jpg" alt="" usemap="#Map" />
  <map name="Map" id="Map">
    <area id="1" onclick="myShowFunction(id)" href="#a" shape="rect" coords="268,323,356,389" />
    <area id="2" onclick="myShowFunction(id)" href="#a" shape="rect" coords="361,284,461,311" />
  </map>
</div>

以下是我正在使用的javascript：

function myShowFunction(int) {

  var request = new XMLHttpRequest();

  request.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      xmlFunction(this); //line 36
    }
  };

  request.open("GET", "exhibitors.xml", true);
  request.send();

  function xmlFunction(xml) {
    var xmlDoc = xml.responseXML;
    var txt = "";
    var val = "stand" + int;
    var x = xmlDoc.getElementsByTagName('exhibitor'); //line 47

    for (var i = 0; i < x.length; i++) {
      var y = xmlDoc.getAttribute('divid');
      if (y == val)
        //just working with name for now since other tags would work the same
        txt += x[i].getElementsByTagName('name');
    }

    document.getElementById("title").innerHTML = txt;
  }


  //TOGGLE ON/OFF BOX
  $(".info-box").hide();

  $('#' + int).click(function (e) {
    $(".info-box").show();
    e.stopPropagation();
  });

  $(document).click(function (e) {
    $(".info-box").hide();
  });
}

目前正在发生的事情是，当我按下地图区域时，信息框会显示但不包含任何文字。我希望当我使用id="1"按区域时，.info-box会显示包含以XML格式显示的文字<exhibitor divid="stand1">。

按下图像区域

0 个答案: