Keterangan alat per piksel

Saya ingin, saat Anda mengarahkan mouse ke piksel di img, Anda akan melihat keterangan alat yang menunjukkan piksel mana (X,Y) yang Anda lewati. Bagaimana saya bisa melakukan ini? Saya harus dapat menangkap dua hal:

  1. Bahwa mereka sedang melayang
  2. Koordinat mouse saat ini, sehubungan dengan piksel gambar

Perhatikan bahwa saya ingin ini dalam bentuk (x,y) dari _asli) img, meskipun browser mereka memperbesarnya


javascript mouseevent
person SRobertJames    schedule 15.11.2015    source sumber

Jawaban (1)


arrow_upward
0
arrow_downward

cuplikan kode ini mungkin berguna bagi Anda, salin kode ini ke file html baru dan ujilah

window.onmousemove = function() {
  var toolitp = document.getElementById("tooltip");
  toolitp.style.top = window.event.clientY + "px";
  toolitp.style.left = window.event.clientX + "px";
  toolitp.innerHTML = " X: " + window.event.clientX + " Y: " + window.event.clientY;
}
<div style="width: 100px; height: 15px; top:0; left: 0; position: absolute; border: 1px solid black;" id="tooltip"></div>

person Azad    schedule 15.11.2015
comment
toolitp.style.top = window.event.clientY + "px"; atau itu tidak akan berhasil - person Salmin Skenderovic; 15.11.2015
comment
Terima kasih - tapi itu relatif terhadap keseluruhan jendela; Saya menginginkannya dibandingkan dengan img (dalam hal piksel img, terlepas dari zoom browser atau lokasi img di halaman atau jendela) - person SRobertJames; 16.11.2015