Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Preventing Image from Being Draggable or Selectable in HTML
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>
Updated on: 2020-06-01T10:44:14+05:30
11K+ Views
Advertisements