简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

En HTML, méthode pour empêcher l'image d'être déplaçable ou sélectionnable sans utiliser JS

PHPz
Libérer： 2023-09-03 08:09:06
avant
1263 Les gens l'ont consulté

En HTML, méthode pour empêcher limage dêtre déplaçable ou sélectionnable sans utiliser JS

Ajoutez l'extrait de code suivant aux propriétés de l'image et empêchez l'image d'être déplacée et sélectionnée. 

img {  
   user-drag: none;  
   user-select: none;
   -moz-user-select: none;
   -webkit-user-drag: none;
   -webkit-user-select: none;
   -ms-user-select: none;
}
Copier après la connexion

Lorsque vous double-cliquez sur un texte ou une image, il sera mis en surbrillance (sélectionné). Les attributs de sélection utilisateur peuvent être utilisés pour éviter cela. En définissant cette propriété sur none, nous pouvons empêcher la sélection (mise en surbrillance) de l'image.

Exemple

Vous pouvez essayer d'exécuter le code suivant pour empêcher la sélection de l'image - 

<!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>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
image HTML bloc js Déplaçable/sélectionnable
source：tutorialspoint.com
Article précédent：Comment créer un tableau de prix en utilisant HTML et CSS ? Article suivant：Comment convertir une chaîne en booléen en JavaScript ?
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Comment faire apparaître mon image sur l'écran principal de la page ? Ce que je veux faire, c'est recevoir des photos en utilisant NASAAPI. Ces photos sont ensu...
Depuis 2024-04-06 15:33:12
0
1
433
J'ai des problèmes avec une grille CSS dont la hauteur n'est pas celle à laquelle je m'attendais, quelles erreurs pourrais-je commettre ? J'apprends actuellement les grilles CSS et on m'a demandé de créer cette carte en la décom...
Depuis 2024-04-06 12:52:14
0
1
339
Problèmes de connexion entre le terminal de reconnaissance faciale iVMS-4200 et la base Le terminal de reconnaissance faciale iVMS-4200 affiche une erreur lors de la connexion à ...
Depuis 2024-04-06 12:20:33
0
1
347
Comment supprimer l'espace sous chaque ligne du tableau Tic-Tac-Toe dans Next.js en utilisant CSS ? Pourquoi y a-t-il un espace sous chaque ligne ? (CSS) J'essaie de créer une application Ne...
Depuis 2024-04-05 11:39:02
0
1
1431
Afficher un élément après un bloc de nouvelle ligne J'ai actuellement ceci : je veux mettre l'icône div à la fin du texte, mais comme c'est un...
Depuis 2024-04-04 21:45:21
0
1
271
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！