ZDIRY-TUFWT-EBONM-EYJ00-IDBLANTER.COM
ZDIRY-TUFWT-EBONM-EYJ00

BLANTERWISDOM105

Cara Append Marker Pada Image Sesuai Posisi Cursor Mouse

4/30/2020

Jika anda menggunakan Facebook, Twitter, atau Flickr anda mungkin pernah menambahkan penanda ke image (photo). Penanda tersebut digunakan untuk menampilkan deskripsi lengkap tentang detail misalkan detail nama seseorang. Terinspirasi dari penanda pada situs-situs tersebut Agung Panduan mencobanya ke projek ASP Net MVC yang sedang dikerjakan.

Konsepnya kita akan mengarahkan dan click kiri mouse ke titik tertentu pada area sekitar image maka akan tampil label span marker seperti gambari di bawah ini,

Create Append Marker at the accurate position of the mouse cursor

Agung Panduan memanfaatkan function AppendTo() dan pengaturan 3 properties seperti:

  1. Top – clientY + scrollTop() untuk output koordinat pada setiap marker.
  2. Left - clientX untuk output koordinat pada setiap marker.

Marker ini akan ditempatkan pada element image di bawah ini,


<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<img class="imgClick" style="width:800px;height:535px;" src="timnas indonesia.jpg" />
</body>
</html>

Maka kita perlu mendefinisikan Style CSS:


<style type="text/css">
 span.marker {
              width: 20px;
              height: 20px;
              background: #f66;
              color: #fff;
              text-align: center;
              position: absolute;
              line-height: 20px;
              cursor: pointer;
          }
 span.marker:before {
  content: '+';
 }
 
 span.caption {
  width: 180px;
  background: #f66;
  color: #fff;
  padding: 4px;
  position: absolute;
  top: 20px;
  left: 0;
  display: none;
 }
 
 .edit-text{
   width: 100px;
         height: 20px;
         position: absolute;
         line-height: 20px;
 }
 
 .imgClick{
        padding:2px 2px;  font-family:caption; font-size:14px; background:grey; display:inline; border-radius:2px;
        background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #F2F2F2), color-stop(1, #CFCFCF));
        background-image: -o-linear-gradient(bottom, #F2F2F2 0%, #CFCFCF 100%);
        background-image: -moz-linear-gradient(bottom, #F2F2F2 0%, #CFCFCF 100%);
        background-image: -webkit-linear-gradient(bottom, #F2F2F2 0%, #CFCFCF 100%);
        background-image: -ms-linear-gradient(bottom, #F2F2F2 0%, #CFCFCF 100%);
        background-image: linear-gradient(to bottom, #F2F2F2 0%, #CFCFCF 100%);
        cursor:default;
        text-align:center;
    }
    .imgClick:hover{
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EAF6FD), color-stop(1, #A7D8F5));
        background-image: -o-linear-gradient(bottom, #EAF6FD 0%, #A7D8F5 100%);
        background-image: -moz-linear-gradient(bottom, #EAF6FD 0%, #A7D8F5 100%);
        background-image: -webkit-linear-gradient(bottom, #EAF6FD 0%, #A7D8F5 100%);
        background-image: -ms-linear-gradient(bottom, #EAF6FD 0%, #A7D8F5 100%);
        background-image: linear-gradient(to bottom, #EAF6FD 0%, #A7D8F5 100%);
    }
    .imgClick:active{ padding:5px 5px 5px 5px;
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #E5F4FC),color-stop(0.5, #C4E5F6), color-stop(0.51, #98D0EF), color-stop(1, #68B3DB));
        background-image: -o-linear-gradient(bottom, #E5F4FC 0%, #C4E5F6 50%, #98D0EF 51%, #68B3DB 100%);
        background-image: -moz-linear-gradient(bottom, #E5F4FC 0%, #C4E5F6 50%, #98D0EF 51%, #68B3DB 100%);
        background-image: -webkit-linear-gradient(bottom, #E5F4FC 0%, #C4E5F6 50%, #98D0EF 51%, #68B3DB 100%);
        background-image: -ms-linear-gradient(bottom, #E5F4FC 0%, #C4E5F6 50%, #98D0EF 51%, #68B3DB 100%);
        background-image: linear-gradient(to bottom, #E5F4FC 0%, #C4E5F6 50%, #98D0EF 51%, #68B3DB 100%);
        top:4px;
        position:relative;
    }
 
 .dropbtn {
  background-color: #4CAF50;
  color: white;
  width:20px;
  font-size: 16px;
  border: none;
 }
 
 .dropdown {
 position: absolute;
 display: inline-block;
 }
 
 .dropdown-content {
 display: none;
 position: absolute;
 background-color: #f1f1f1;
 min-width: 160px;
 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
 z-index: 1;
 }
 
 .dropdown-content a {
 color: black;
 padding: 12px 16px;
 text-decoration: none;
 display: block;
 }
 
 .dropdown-content a:hover {background-color: #ddd;}
 
 .dropdown:hover .dropdown-content {display: block;}
 
 .dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>

Dengan menggunakan JQuery yaitu metode function AppendTo dan CSS kita akan menambahkan <input> dan <span.marker> pada element <img>.

<script type="text/javascript">
var scrollPosition = 0;
var lastRow=0;
var x=0;
var y =0;
$(window).scroll(function (e) {
    scrollPosition = $(this).scrollTop(); 
});
 
$('.imgClick').click(function (e) {
  x = e.clientX
     y = e.clientY + parseFloat(scrollPosition)
  lastRow++;
  
  addInput(x,y,lastRow);
});

function addInput(x,y,lastRow){
   var target = $(document.body);
  
   $('<input type="text" id="edittext" class="edit-text">').css({
       top: y + "px",
       left: x + "px"//,
   }).appendTo(target);
}

$("body").on( "keypress", ".edit-text", function(event){
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
  addLabel(x,y,lastRow, $(this).val());
  $('.edit-text').remove();
    }
});
  
function addLabel(x,y,lastRow,value) {
   var target = $(document.body);
  
   $('<span class="marker" id="span' + lastRow + '"/>1<span class="caption">--Choose--</span></span>').css({
       top: y + "px",
       left: x + "px"//,
       //backgroundColor: colorback
   }).appendTo(target);

   $("#span" + lastRow).click(function () {
       var $marker = $(this),
           $caption = $('span.caption', $marker);
       if ($caption.is(':hidden')) {
           $caption.slideDown(300);

       } else {
           $caption.slideUp(300);
       }
   });
   
   $("#span" + lastRow).html('<span class="caption" id="spancap' + lastRow + '">' + value + '</span>');
}
</script>

Catatan: Agar posisi penempatannya tepat di titik mouse maka gunakan targetnya $(document.body) serta css untuk setiap marker harus absolute.

Tidak hanya AppendTo <span> dan <input> saja namun juga bisa menambahkan <button> dropdown. Anda cuman menambahkan script di bawah ini dan mengganti AddInput() dengan AddDropDown(),

function myFunction(){
$('.imgClick').click(function (e) {
  x = e.clientX
     y = e.clientY + parseFloat(scrollPosition)
  lastRow++;
  
  AddDropDown(x,y,lastRow)
  //addInput(x,y,lastRow);
});

function AddDropDown(x,y,lastRow){
 var target = $(document.body);
 $('<div class="dropdown">'+
        '<button class="dropbtn">+</button>'+
        '<div class="dropdown-content">'+
  '  <a onClick="getValue(1)" href="#"><input type="hidden" id="cmbdefect1" value="Irfan Bachdim" data-detail="" />Irfan Bachdim</a>' +
  '  <a onClick="getValue(2)" href="#"><input type="hidden" id="cmbdefect2" value="LilyPaly" data-detail="" />LilyPaly</a>' +
  '  <a onClick="getValue(3)" href="#"><input type="hidden" id="cmbdefect3" value="Yanto Basna" data-detail="" />Yanto Basna</a>' +
  '  <a onClick="getValue(4)" href="#"><input type="hidden" id="cmbdefect4" value="Andik" data-detail="" />Andik</a>' +
        '</div>'+
        '</div>').css({
          top: y + "px",
          left: x + "px"
        }).appendTo(target);
}

function getValue(i) {
 addLabel(x,y,lastRow, $("#cmbdefect" + i).val());
    $(".dropdown").remove();
}
Share This :

0 Comments