ِكيف اقدر امنع المستخدم من سحب الصورة وتحريكها في الموقع او سحبها و فتحها في نافذ جديدة
في html
عموما لن يمكنك ذلك بشكل نهائي لأن فكرة الـويب المفتوح هي في مشاركة البيانات , و يلخص الأمر عادة كـ "إن كان يستطيع الوصول إليها , فهي قابلة للتحديد و التحميل لديه " .
و لكن يمكنك بكل حال من الأحوال منع عوام المستخدمين من الوصول إليها بإتباع أحد الطرق التالية :
- تعطيل تفحص مصدر الصور , العناصر و الشيفرات :
document.addEventListener('contextmenu', function(e) { e.preventDefault(); });
- إضافة طبقة شفافة فوق الصورة تمنع الوصول إليها :
<div class="img-container"> <img src="path/to/myImg.png" /> <div class="overlay"></div> </div> .. .img-container{ position :relative; height:auto; width: auto; } .img-container img{ height: 250px; width: 250px; } .img-container .overlay{ position: absolute; width:100%; height:100%; z-index:999999; }
- الإستعانة ببعض خواص الـ css :
img { user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; }
التعليقات