的jQuery上點擊顯示格但它閃爍並消失

我有map.html，顯示下方的美國地圖和詳細地址：的jQuery上點擊顯示格但它閃爍並消失

<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'); 
    }); 
});

問題

點擊我想要顯示id="div_waornvca"與我的地址在我設計的CSS彈出窗口中。當我點擊時，它會顯示，但消失速度非常快。用戶看不到它（因爲我發出了警報，所以我能夠看到它）。

首選解決方案

onclick，它應該顯示的股利。該div包含一個close圖像。 onclick上close圖片，它應該關閉。

我如何得到這樣的工作？

來源

2011-09-11 arc

不確定您的整個頁面，但如果您點擊左上方的400x400像素（這是我在缺少poly的情況下使用的測試區域），this example似乎可以正常工作。

來源

2011-09-11 17:27:34

輝煌輝煌它的工作原理。比較你的代碼與我的，發現區域的每個條目有一個href =「」刪除這個，它工作正常。謝謝！ – arc

的jQuery上點擊顯示格但它閃爍並消失

回答

相關問題