Make images not selectable

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 dra开发者_Python百科g 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>

---

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.

---

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

img {
  pointer-events: none;
}

---

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

---

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