Stackoverlow 2013-10-14

by john_s

HTML

<div class="container">
  <div class="row">
    <div class="col-md-9 col-sm-9 col-xs-9 imgDisplay">
      <div class="imgDisplayTemplate">
        <div class="panel panel-default">
          <div class="panel-heading imgHead">
            <h4 class="panel-title">Tag Test</h4>
          </div>
          <div class="panel-body imgBody">
            <div class="col-md-12 imgAnalyze">
              <h2><span class="label label-default showTemp">Y=0 X=0</span></h2>
            </div>
            <div class="row">
              <div class="col-md-12 imgImage">
                  <img src="http://placehold.it/640x480" width="640" height="480" />
                <div class="tempSpot" id="temp_1" style="left:220px; top: 250px;">X=220 Y=250<span> x</span></div>
                <div class="tempSpot" id="temp_2" style="left:129px; top: 116px;">X=129 Y=116<span> x</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>    
    </div>
  </div>

CSS

.tempSpot {
    color: #FFF;
    display: block;
    font-family: verdana;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    white-space: nowrap;
    z-index: 200;
    background-color: red;
    background-position: 0px 0px;
    height: 25px;
    width: 130px;
    text-align: center;
    cursor: pointer;
}
.tempSpot span{
    color: #000;
}

JavaScript

var pgPosX = 0;
var pgPosY = 0;
var intTempSpot = 0;
var intSpots = 0;
$(document).ready(function() {
  $('.imgDisplayTemplate .imgImage').hover(function(e) {
    }).mousemove(function(e){
           var imgOffset = $('.imgImage img').offset();
           window.pgPosX = Math.round(e.pageX-imgOffset.left-1);
           window.pgPosY = Math.round(e.pageY-imgOffset.top-1);
           if(window.pgPosX >= 0 && window.pgPosX < 640 && window.pgPosY >= 0 && window.pgPosY < 480) {
            $('.imgDisplay .imgAnalyze span.showTemp').html("X="+window.pgPosX+" Y="+window.pgPosY);
           }
    }).click(function(e) {
        if(window.pgPosX >= 0 && window.pgPosX < 640 && window.pgPosY >= 0 && window.pgPosY < 480) {
            window.intSpots++;
            window.intTempSpot++;
            var tag = "<div class='tempSpot' id='temp_"+window.intTempSpot+"' style='left:"+(window.pgPosX+15)+"px; top: "+(window.pgPosY)+"px;'>X="+window.pgPosX+" Y="+window.pgPosY+" <span> x</span></div>";
            $('.imgDisplay .imgImage').append(tag);
            $('.imgAnalyze button.TempSpotPost').css('display', 'inline-block');
        }
    }); 

    //close a tempSpot 
    $('.imgDisplay .imgImage').on('click', '.tempSpot span', function() {
        $(this).closest('div.tempSpot').remove();
        return false;
    });
});