Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > body text

In HTML, method to prevent image from being draggable or selectable without using JS

PHPz
Release： 2023-09-03 08:09:06
forward
1296 people have browsed it

In HTML, method to prevent image from being draggable or selectable without using JS

Add the following code snippet to the image properties and prevent the image 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;
}
Copy after login

When you double-click the text or image, it will be highlighted (selected). User selection attributes can be used to prevent this. By setting this property to none we can prevent the image from being selected (highlighted).

Example

You can try running 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>
Copy after login

The above is the detailed content of In HTML, method to prevent image from being draggable or selectable without using JS. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
html images js block Draggable/selectable
source：tutorialspoint.com
Previous article：How to create a pricing table using HTML and CSS? Next article：How to convert string to boolean in JavaScript?
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How do I get my image to appear on the page's main display? What I want to do is receive some photos using NASAAPI. These photos are then displayed on...
From 2024-04-06 15:33:12
0
1
433
I'm having trouble with a CSS grid where the height isn't what I expected, what mistakes might I be making? I'm currently learning CSS grids and was asked to make this card by breaking it into a gri...
From 2024-04-06 12:52:14
0
1
339
Problems with the connection between the face recognition terminal iVMS-4200 and the base The face recognition terminal iVMS-4200 displays an error when connecting to the mysql dat...
From 2024-04-06 12:20:33
0
1
347
How to remove the space below each line on the Tic-Tac-Toe board in Next.js using CSS? Why is there a space below each line? (CSS) I'm trying to make a Next.js tic-tac-toe app t...
From 2024-04-05 11:39:02
0
1
1431
Display an element after a block newline I currently have this: I want to put the icon div at the end of the text, but since it's a...
From 2024-04-04 21:45:21
0
1
271
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template