Question

我有map.html，其中显示了美国地图及其下方的地址详情：

<img class="myusmap" src="usmap.jpg" USEMAP="#usmap" BORDER=0/>
<div>
 <map name="usmap">
  <area id="waornvca" shape="poly" class="vtip" coords=...>
 </map>
</div>
<div id="div_waornvca" style="display:none;">
  <!-- my address here -->
</div>

CSS

p#vtip { 
  display: none;
  position: absolute;
  padding: 10px;
  left: 5px;
  font-size: 0.8em;
  background-color: white;
  border: 1px solid #a6c9e2;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  z-index: 9999
}
p#vtip #vtipArrow {
  position: absolute;
  top: -10px;
  left: 5px
}

的Javascript

$(document).ready(function() {
  xOffset = -10; // x distance from mouse
  yOffset = 10; // y distance from mouse       

  $(".vtip").click(function(e) {
    var repDiv = "div_"+this.id;
    this.t = document.getElementById(repDiv).innerHTML;
    this.top = (e.pageY + yOffset);
    this.left = (e.pageX + xOffset);
    $('body').append( '<p id="vtip"><img id="vtipArrow" />' + 
        this.t +
        '<img align=right id="closeArrow" /></p>'
    );
    $('p#vtip #vtipArrow').attr("src", 'images/vtip_arrow.png');
    $('p#vtip #closeArrow').attr("src", 'images/close_icon.png');
    $('p#vtip').css("top", this.top+"px").css("left", this.left+"px").fadeIn("slow");
    //alert('check done');
  });
});

问题

点击后，我想在我设计的CSS弹出窗口中显示id="div_waornvca"我的地址。当我点击它，它显示但很快就消失了。用户无法看到它（我能够因为我发出警报）。

首选解决方案

onclick，它应该显示div。 div包含close图像。在onclick图片上close，它应该关闭。

我如何让它像这样工作？

Answer 1

不确定您的整页，但如果您单击左上角的400x400像素（这是我在没有您的多边形时使用的测试区域），this example似乎有效。

单击jQuery显示div但它闪烁并消失

1 个答案: