Make images not selectable - html

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>

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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