CODEWITHSUNDEEP
javascripthtmldom
stu
stu

Reputation: 8805

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

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?

Upvotes: 1

Views: 1762

Answers (5)

robertc
robertc

Reputation: 75747

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

<img draggable="false"...

Upvotes: 1

AbstractProblemFactory
AbstractProblemFactory

Reputation: 9811

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.

Upvotes: 0

Vincent McNabb
Vincent McNabb

Reputation: 34729

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);">

Upvotes: 2

dockeryZ
dockeryZ

Reputation: 3981

using jquery,

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

Upvotes: 1

recursive
recursive

Reputation: 86134

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

Upvotes: 5

Related Questions