Make images not selectable

Question

I am making a website in dreamweaver CS5. I exported the images from photoshop an inserted them into a table. When I view the site all the images are selectable(you are able to drag them to your desktop). How do I change this??? I want to do it with an onclick method in addition how would I achieve this?

<td><img src="images/people_03.png" name="one" width="1000" height="156" id="one" ONCLICK="closeimages();"/></td>

not sure what you mean by selectable. Able to drag the image? — robx, May 12 '11 at 20:01
You mean you don't want people to be able to right click save the images? — Trevor Dupp, May 12 '11 at 20:02
Are you saying you want users to be able to select the table, and copy only the text content? If so, please clarify; it's difficult to understand what you're trying to achieve. — user229044, May 12 '11 at 20:11
Guys, I think he just means selectable... like when you drag your mouse around and then everything turns blue and it makes your mockup look fake. — BrainSlugs83, Mar 06 '20 at 21:17

score 64 · Answer 1 · edited May 23 '17 at 12:25

64

I stumbled upon this question while struggling with the same problem but the accepted answer was not a possible solution for me.

I used the info found here , in particular adding the following styles to my body, inside the css (this worked for me in Firefox, Chrome and Opera, I cannot test for IE)

-moz-user-select: none;
-webkit-user-select: none;
user-select: none;

The unselectable html tag seems also helpful, but it's apparently supported only by IE and Opera:

<img src="1.jpg" unselectable="on">

as well as the javascript solution, that is said to work on IE and webkit browsers:

<script>
window.onload = function() {
    document.body.onselectstart = function() {
        return false;
    }
}
</script>

Note. As Albert Renshaw pointed in the comment this method no longer works in Chrome > 50.

edited May 23 '17 at 12:25

Community

1
1

answered Jun 21 '12 at 09:49

BBog

3,630
5
33
64

2

*Note: Doesn't work in Google Chrome as of 2016 (Chrome v 50.0.2661.102 (64-bit)), this answer does though: http://stackoverflow.com/a/27086422/2057171 – Albert Renshaw May 14 '16 at 19:27
3

NOTE: The above solution is now working on Google Chrome(v 58.0.3029.110 (64-bit)) as well as successfully tested on Safari(v 10.1.1 (12603.2.4)) - **2017** – Chaitanya Jun 18 '17 at 09:27
**2020:** user-select does not need vendor prefixes: https://caniuse.com/#feat=user-select-none – Elijah Mock Mar 20 '20 at 14:08

score 46 · Answer 2 · answered Nov 23 '14 at 06:58

46

I would use pointer-events: none; in my CSS

img {
  pointer-events: none;
}

answered Nov 23 '14 at 06:58

Linh Dam

2,033
1
19
18

6

This also removes any pointer.. as for a hover you can't see the hand-icon of the mouse anymore.. so this is not really a solution if you have a hover on it. – Elvira Aug 07 '15 at 14:30
Agree. I haven't notice this use case before. Thanks for pointing this out! But without that hovering mouse hand-icon, i think this should work. – Linh Dam Aug 08 '15 at 13:43
1

In my case this is the best use case, perfect solutions, I had to use a full screen background image, but if I'm using it on div or on body, the stretching isn't a good solutions as compare to using as img with 100% width and height. and then I wanted to disable dragging and no other solutions works for me but this one perfectly workded. thanks @LinhDam – Usman Arshad Jun 26 '16 at 06:12

Arad Alvand · Answer 3 · 2021-06-16T22:58:14.513

Reliable Pure CSS Solution

Applying the following 2 CSS properties to your <img> element(s) will achieve exactly what you described:

pointer-events: none;
user-select: none;

This works reliably across all modern browsers.

Example: (Try to select and drag the image with your cursor! :D)

img {
  pointer-events: none;
  user-select: none;
}

<img src="https://source.unsplash.com/random/200x200" alt="sample image" />

The only downside is that pointer-events: none causes your :hover, :active and other pointer-related CSS pseudo-classes to stop working.

In order to solve this, you should use a <div> or something as a wrapper for your <img> and then apply your :hover, :active pseudo-classes on that wrapper as opposed the <img> itself.

Example:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}
/* Don't mind the code above... */

.image-wrapper {
  transition: ease .5s;
}

.image-wrapper:hover {
  transform: scale(1.3)
}

.image {
  pointer-events: none;
  user-select: none;
}

<div class="image-wrapper">
  <img class="image" src="https://source.unsplash.com/random/200x200" alt="sample image" />
</div>

If you also don't want to or can't change your HTML markup, then you're gonna have to resort to some JavaScript:

imgElement.addEventListener('selectstart', () => false);

While this snippet may answer the question, it is better to include some context about how it works and how it answers the question. — JKirchartz, May 02 '18 at 18:43

score 16 · Accepted Answer · answered May 12 '11 at 20:00

16

Easiest way I think would be to make the images as css background images to each cell

answered May 12 '11 at 20:00

awake12

194
1
3

How do I insert images into the table with css? I tried something but it didn't work. – BDGapps May 12 '11 at 21:28
2

If you really must then `` – Dan Diplo May 12 '11 at 21:38
i just tried what you said and it didn't work nothing happens... – BDGapps May 12 '11 at 23:27
I want to do it with an onclick method in addition how would I achieve this? – BDGapps May 13 '11 at 00:37
Converting the actual images to background images is not a good idea at all. – Arad Alvand Apr 18 '19 at 09:51

Make images not selectable

4 Answers4

Reliable Pure CSS Solution

Example: (Try to select and drag the image with your cursor! :D)

Linked

Related