Preventing an image from being draggable or selectable in HTML without using JS

HTMLWeb DevelopmentFront End Technology

Add the following code snippet to image properties, and prevent images from being dragged and selected.

img {  
   user-drag: none;  
   user-select: none;
   -moz-user-select: none;
   -webkit-user-drag: none;
   -webkit-user-select: none;
   -ms-user-select: none;
}

On double click on a text or image, it is highlighted (selected). The user select property can be used to prevent this. By setting this property to none, we can prevent our image from being selected (highlighted).

Example

You can try to run the following code to prevent the image from being selected −

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            -drag: none;
            user-select: none;
            -moz-user-select: none;
            -webkit-user-drag: none;
            -webkit-user-select: none;
            -ms-user-select: none;
         }
      </style>
   </head>
   <body>
      <img src = "https://www.tutorialspoint.com/images/python3.png" alt = "Python" width = "62" height = "62">
   </body>
</html>
raja
Published on 20-Mar-2018 10:26:17
Advertisements