Is there a way to make an img tag not selectable in a browser?

Question

I have an image in my page and I don't want it to pick up mouse clicks (as in the browsers inherent drag and drop or the drag select where it highlights the image in the browser.)

Is there something I can do to the img or its parent dom element or the page to make the browser not do anything when I click on the image? I need to use the mousedown for something else, but the browser seems to perform my mousedown event as well as do its own dragging or highlighting, and I don't want it to. Any ideas?

Answer 1

Create a div the same size as the image, and then set the image to be the background of the div.

Answer 2

Best idea what I get, is to cover <img ... by some transparent <div and bind mousedown action to its :) EDIT: or of course, if u won't play with img, u can use it as a background for your div.

Answer 3

using jquery,

$('img').click(function() {
  return false;
})

Answer 4

As recursive said, use a div, and set it's background image to the image you want, e.g.:

<div style="width: 879px; height: 576px; background-image: url(image.png);">

Answer 5

Images are draggable by default. To override the browser default behaviour, try:

<img draggable="false"...