I have an image <img src="fullscreen.jpg" /> for online driving exams, where the questions are asked using image text and with image embedded. When anyone click the image and drag the mouse it moves the image.

But how can i stop this dragging? So that nobody is allowed to do so.

I have an image <img src="fullscreen.jpg" /> for online driving exams, where the questions are asked using image text and with image embedded. When anyone click the image and drag the mouse it moves the image.

But how can i stop this dragging? So that nobody is allowed to do so.

• javascript
• jquery
• css
• html

3 Answers 3

$('#id-of-your-image').mousedown(function(){return false});

Of course you may have to use other selector as in your example image has no id attribute.

If you're using jQuery, you're looking for the dragstart event.

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

Try any of these 3 if you can't or don't want to use an id or jQuery (cross-browser performance has not been tested):

<img src="http://www.google./intl/en_/images/srpr/logo3w.png" ondragstart='return false;'/>
<img src="http://www.google./intl/en_/images/srpr/logo3w.png" onmousedown='return false;'/>
<img src="http://www.google./intl/en_/images/srpr/logo3w.png" onmousedown='return false;' ondragstart='return false;'/>

Demo