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>

Echinate

not sure what you mean by selectable. Able to drag the image? – Hollandia

You mean you don't want people to be able to right click save the images? – Kial

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. – Flourish

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. – Ampereturn

Answer 1

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

Paillette

How do I insert images into the table with css? I tried something but it didn't work. <td height="174" width ="278" background="images/imageone.png"> – Echinate

If you really must then <td style="width:278px;height:174px;background-image:url('images/imageone.png')"> – Filigree

i just tried what you said <td style="width:278px;height:174px;background-image:url('images/home_01.png')"/> and it didn't work nothing happens... – Echinate

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> – Echinate

Converting the actual images to background images is not a good idea at all. – Horvath

Answer 2

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.

Pooley

*Note: Doesn't work in Google Chrome as of 2016 (Chrome v 50.0.2661.102 (64-bit)), this answer does though: https://mcmap.net/q/485922/-make-images-not-selectable – Berlyn

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 – Moneybag

2020: user-select does not need vendor prefixes: caniuse.com/#feat=user-select-none – Huffy

Answer 3

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

img {
  pointer-events: none;
}

Develop

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. – Revivalism

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. – Develop

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 – Boutis

This answer is wrong. Not only does is badly remove all pointer events (so nobody can right click an image to download/copy/etc.), but the image is still selectable with a mouse drag, so it doesn't even satisfy the OPs question. How to blatently wrong answer get upvoted so many times? Do people just upvote without actually test to see it if works? – Waite

Answer 4

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

Horvath

While this snippet may answer the question, it is better to include some context about how it works and how it answers the question. – Helbon