شرح وافي للأكواد وفائدتها في حماية الصور على موقعك

شرح وافي للأكواد وفائدتها في حماية الصور على موقعك

تعطيل النقر بزر الماوس الأيمن على صورة محددة

<img src="رابط الصورة" onContextMenu="return false;"/>

الوظيفة: يعطل النقر بزر الماوس الأيمن على صورة محددة في صفحة الويب.

التفاصيل:

• onContextMenu هو حدث يتم تشغيله عندما ينقر المستخدم بزر الماوس الأيمن.
• return false; يمنع ظهور القائمة السياقية (مثل "حفظ الصورة كـ") عند النقر بزر الماوس الأيمن.

الفائدة: يحمي الصورة من السرقة المباشرة عن طريق النقر بزر الماوس الأيمن وحفظها.

إضافة رسالة تنبيه عند النقر بزر الماوس الأيمن

<img src="رابط الصورة" onContextMenu="alert('مرحبًا!\nلا تأخذ صورتي!'); return false;"/>

الوظيفة: يعطل النقر بزر الماوس الأيمن ويظهر رسالة تنبيه للمستخدم.

التفاصيل:

• alert('مرحبًا!\nلا تأخذ صورتي!'); يعرض رسالة تنبيه عند النقر بزر الماوس الأيمن.
• \n يستخدم لإضافة سطر جديد في الرسالة.
• return false; يمنع ظهور القائمة السياقية.

الفائدة: يوفر طبقة إضافية من الحماية عن طريق تذكير المستخدم بعدم نسخ الصورة.

تعطيل النقر بزر الماوس الأيمن على جميع الصور في الموقع

<script type='text/javascript'>//<![CDATA[
function nocontext(e) {
    var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
    if (clickedTag == "IMG") {
        return false;
    }
}
document.oncontextmenu = nocontext;
//]]></script>
    

الوظيفة: يعطل النقر بزر الماوس الأيمن على جميع الصور في الموقع.

التفاصيل:

• nocontext(e) هي دالة يتم تنفيذها عند النقر بزر الماوس الأيمن.
• clickedTag يتحقق من العنصر الذي تم النقر عليه.
• إذا كان العنصر صورة (IMG)، يتم إرجاع false لمنع القائمة السياقية.

الفائدة: يحمي جميع الصور في الموقع من السرقة المباشرة.

إضافة رسالة تنبيه عند النقر بزر الماوس الأيمن على جميع الصور

<script type='text/javascript'>
//<![CDATA[
    function nocontext(e) {
        var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
        if (clickedTag == "IMG") {
            alert(alertMsg);
            return false;
        }
    }
    var alertMsg = "لا تجرؤ على نسخ صورنا. ";
    document.oncontextmenu = nocontext;
//]]>
</script>
    

الوظيفة: يعطل النقر بزر الماوس الأيمن على جميع الصور ويظهر رسالة تنبيه.

التفاصيل:

• alertMsg يحتوي على الرسالة التي تظهر عند النقر بزر الماوس الأيمن.
• alert(alertMsg); يعرض الرسالة.
• return false; يمنع ظهور القائمة السياقية.

الفائدة: يوفر حماية مع رسالة توعوية للمستخدمين.

تعطيل تحديد الصور ونقلها

/* Widget Script by https://www.aweywashk.xyz/ */
.Blog .post-entry img{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    pointer-events:none
}

الوظيفة: يعطل إمكانية تحديد الصور ونقلها.

التفاصيل:

• user-select:none; يمنع المستخدم من تحديد الصور.
• pointer-events:none; يمنع التفاعل مع الصور (مثل النقر أو السحب).
• الخواص الأخرى (-webkit-, -moz-, -ms-) تضمن التوافق مع المتصفحات المختلفة.

الفائدة: يمنع المستخدمين من نسخ الصور عن طريق التحديد أو السحب والإفلات.

أهمية وفائدة هذه الأكواد

• حماية المحتوى المرئي: تمنع سرقة الصور بسهولة، خاصة إذا كانت صورًا مدفوعة أو محتوى أصليًا.
• تحسين أمان الموقع: تضيف طبقة إضافية من الحماية للمحتوى الخاص بك.
• توعية المستخدمين: الرسائل التنبيهية تذكر المستخدمين بعدم نسخ المحتوى.
• منع النسخ غير المصرح به: تعطيل النقر بزر الماوس الأيمن والتحديد يقلل من فرص سرقة الصور.

ملاحظات مهمة

• عيوب هذه الحلول:
  • يمكن تجاوز هذه الحماية بسهولة عن طريق تعطيل JavaScript في المتصفح.
  • يمكن للمستخدمين الوصول إلى الصور من خلال ذاكرة التخزين المؤقت للمتصفح أو عن طريق فتح الكود المصدري للصفحة.
• نصيحة:
  • إذا كانت الصور ذات قيمة عالية، يمكنك استخدام تقنيات أكثر تقدمًا مثل:
    • إضافة علامة مائية (Watermark) على الصور.
    • تقنية التعتيم على الصور (Image Overlay) لجعل نسخها أكثر صعوبة.

الخلاصة

هذه الأكواد توفر حماية أساسية للصور على موقعك، ولكنها ليست حلًا نهائيًا. يمكن استخدامها كجزء من استراتيجية أوسع لحماية المحتوى الخاص بك.