내 페이지에 이미지가 있고 마우스가 내려 갔을 때 onmousemove 이벤트를 듣고 싶습니다. 하지만 브라우저 (Firefox)에서 이미지를 드래그하면 실제로 이미지를 드래그 할 수 없으므로 원하지 않습니다.img가 html로 이동하지 않도록 설정하십시오.
자바 스크립트 부분 :
document.onmousemove=getMouseCoordinates;
var x;
var y;
var clicked = false;
function getMouseCoordinates(event){
ev = event || window.event;
x = ev.pageX;
y = ev.pageY;
}
function onClickMap(){
var obj = document.getElementById("selectArea");
var tempX = x;
var tempY = y;
obj.style.left = tempX + "px";
obj.style.top = tempY + "px";
clicked = true;
}
function onMoveMap(){
if(clicked){
var obj = document.getElementById("selectArea");
var xToSize = Math.abs(parseInt(obj.style.left) - x);
var yToSize = Math.abs(parseInt(obj.style.top) - y);
obj.style.width = xToSize + "px";
obj.style.height = yToSize + "px";
}
}
HTML 부분 :
여기<img src="pixels.png" id ="pixelDiv" usemap="#pixelMap" onClick="onClickMap()" onmousemove="onMoveMap()">
이미지를 드래그하지 않겠습니까? –
CSS'-webkit-user-drag : none; '을 사용할 수 있지만 webkit atm에서만 지원됩니다. – Shmiddty