ِكيف اقدر امنع المستخدم من سحب الصورة وتحريكها في الموقع او سحبها و فتحها في نافذ جديدة
في 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;
}
التعليقات