مدونة جوارا: تطبيق حماية الصور: تعطيل النقر الأيمن على عناصر <img>

📚 مراجعة سريعة: هذا التطبيق العملي مبني على مفهوم برمجي أساسي. راجع الدرس النظري من هنا أولاً.

الآن بعد أن فهمنا النظرية وراء تعطيل النقر الأيمن على الصور، حان الوقت لتطبيق هذا المفهوم عمليًا. سنقوم بإنشاء صفحة ويب بسيطة تحتوي على بعض الصور ونطبق عليها الكود الذي تعلمناه.

الخطوة 1: إنشاء ملف HTML أساسي

ابدأ بإنشاء ملف جديد باسم index.html وأضف الهيكل الأساسي لصفحة HTML:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>حماية الصور من النقر الأيمن</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
        img { max-width: 300px; margin: 20px; border: 1px solid #ccc; }
        .info { margin-top: 40px; color: #555; }
    </style>
</head>
<body>
    <h1>تجربة حماية الصور</h1>
    <p>حاول النقر بالزر الأيمن على الصور أدناه.</p>

    <img src="https://via.placeholder.com/300x200?text=صورة+1" alt="صورة توضيحية 1">
    <img src="https://via.placeholder.com/300x200?text=صورة+2" alt="صورة توضيحية 2">
    <img src="https://via.placeholder.com/300x200?text=صورة+3" alt="صورة توضيحية 3">

    <div class="info">
        <p>يمكنك النقر بالزر الأيمن هنا في أي مكان خارج الصور.</p>
    </div>

    <!-- هنا سنضيف كود JavaScript -->
</body>
</html>

الخطوة 2: إضافة كود JavaScript

الصق كود JavaScript الذي تعلمناه قبل وسم الإغلاق </body> مباشرةً. هذا يضمن أن تكون جميع الصور قد تم تحميلها في DOM قبل أن يحاول السكريبت الوصول إليها.

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>حماية الصور من النقر الأيمن</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
        img { max-width: 300px; margin: 20px; border: 1px solid #ccc; }
        .info { margin-top: 40px; color: #555; }
    </style>
</head>
<body>
    <h1>تجربة حماية الصور</h1>
    <p>حاول النقر بالزر الأيمن على الصور أدناه.</p>

    <img src="https://via.placeholder.com/300x200?text=صورة+1" alt="صورة توضيحية 1">
    <img src="https://via.placeholder.com/300x200?text=صورة+2" alt="صورة توضيحية 2">
    <img src="https://via.placeholder.com/300x200?text=صورة+3" alt="صورة توضيحية 3">

    <div class="info">
        <p>يمكنك النقر بالزر الأيمن هنا في أي مكان خارج الصور.</p>
    </div>

    <script>
        document.querySelectorAll('img').forEach(img => {
            img.addEventListener('contextmenu', e => e.preventDefault());
        });
    </script>
</body>
</html>

الخطوة 3: اختبار الكود

افتح ملف index.html في متصفح الويب الخاص بك (يمكنك سحبه وإفلاته في نافذة المتصفح أو النقر المزدوج عليه).
حاول الآن النقر بزر الفأرة الأيمن على إحدى الصور. ستلاحظ أن القائمة المنبثقة لن تظهر.
ثم حاول النقر بزر الفأرة الأيمن في أي مكان آخر في الصفحة (مثل النص أو المساحات الفارغة). ستلاحظ أن القائمة المنبثقة تظهر بشكل طبيعي، مما يؤكد أن الكود يعمل فقط على الصور.

تحديات إضافية (اختياري):

تعطيل النقر الأيمن على عناصر محددة: كيف يمكنك تعديل الكود لتعطيل النقر الأيمن فقط على الصور التي تحمل فئة CSS معينة، مثل <img class="protected-image" ...>؟ (تلميح: ستغير محدد 'img').
رسالة تنبيه: هل يمكنك إضافة رسالة تنبيه (alert()) تظهر للمستخدم عند محاولته النقر بالزر الأيمن على صورة، بدلاً من مجرد منع القائمة؟ (تلميح: يمكنك إضافة alert("هذه الصورة محمية!") قبل e.preventDefault()).

بهذا تكون قد طبقت بنجاح حماية الصور باستخدام JavaScript، وفهمت كيفية التفاعل مع أحداث المتصفح لمنع السلوكيات الافتراضية.