CODEWITHSUNDEEP
javascripthtmlonclickonmousemove
Ferenc Dajka
Ferenc Dajka

Reputation: 1051

Make img not to move in html

I have an image on my page, and I would like to listen to onmousemove events when the mouse is down. But I can't because in my browser (Firefox), when I drag an image, well actually I drag the image, which I don't want.

Here's my code:

JavaScript part:

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 part:

<img src="pixels.png" id ="pixelDiv" usemap="#pixelMap" onClick="onClickMap()" onmousemove="onMoveMap()">

Upvotes: 1

Views: 179

Answers (3)

Ferenc Dajka
Ferenc Dajka

Reputation: 1051

ok it's nice, but I suppose it is something firefox specific, now I disabled the onlcick and onmove methods of my image, but I can stil drag the image

now I've found the solution, I was looking for this

http://www.develobert.info/2008/10/disable-firefox-image-drag.html

Upvotes: 0

Matt Burland
Matt Burland

Reputation: 45135

You can add a mousedown handler that just returns false. This seems to stop the dragging in FF.

Upvotes: 0

mbinette
mbinette

Reputation: 5094

Here is a jQuery solution.

This will disable all drags:

$(document).bind("dragstart", function() {
     return false;
});

If you want to disable drags only on img elements:

$(document).bind("dragstart", function(e) {
     if (e.target.nodeName.toUpperCase() == "IMG") {
         return false;
     }
});

Upvotes: 2

Related Questions