Question

I have map.html which shows a US map and address details below it:

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

Problem

On click I want to show id="div_waornvca" with my address in the CSS popup that I designed. When I click, it displays but goes away really fast. A user cannot see it (I was able to because I placed an alert).

Preferred Solution

onclick, it should show the div. The div contains a close image. onclick on close image, it should close.

How do I get this to work like this?

Answer 1

Not sure about your full page, but this example seems to work if you click in the top-left 400×400 pixels (which is the test area I have used in the absence of your poly).