מורידים לכם מהאתר תמונות ללא זכויות יוצרים, אנחנו מתמודדים עם הבעיה בדרך מיוחדת

כחלק מהצגת היכולות שלנו באתר אנו מעלים תמונות, תמונות אלו הן תמונות של עיצובים גרפיים לאתרים, מצגים של קטעי קוד תוכנה שכתבנו ויצירות עליהן עבדנו קשה.

כמונו עסקים רבים כמו צלמים, מעצבים ואפילו בתי תוכנה כמונו מציגים גלריות של יצירות באתרי אינטרנט רבים ולא רוצים שכל העבודה הקשה הזו תתבזבז כשפשוט יכנס אדם לאתר וילחץ מקש ימני הורד תמונה או העתק וישתמש באותה יצירה לצרכיו בקלות כזו.

אנו ניסינו לצמצם את בעיה זו אצלינו, אומנם לא הצלחנו לבטל את האופציות כלל אך לפחות ניסינו להקשות עליהם מעט בתהליך.

via GIPHY

 

אז כמובן שישנה הגבלה לפתרון שלנו, הוא פועל על האתר שלנו שהוא אתר אלמנטור רגיל ללא תוספים מיוחדים בתחום התמונות וכל תוסף שונה יכול לשנות את היכולת של הגנה זו, או אם הם מאוד יצירתיים הם יכולים להיכנס לכלי הפיתוח דרך F12 ולבאס לנו את ההצגה אבל ניסינו את המיטב שלנו בתיק העבודות שלנו!

via GIPHY

 

אז…. מה עשינו?

אפיון הבעיה:

אנחנו קלטנו ש2 הדרכים בתיק העבודות באתר האינטרנט שלנו דרכן יכולים להעתיק תמונות ללא שימוש בכלי הדפדפן היא מקש ימני או דרך אופציית ההורדה בגלריה של האלמנטור.

לצורך נטרול ההורדה דרך מקש ימני הדרך שלנו היא מעט ברוטאלית… נטרלנו אותו לגמרי

via GIPHY

איך מנטרלים מקש ימני בדף?

ראשית הוספנו אלמנט html מהאופציות של אלמנטור:

אלמנט html באלמנטור
אלמנט html באלמנטור

ניתן להוסיף את האלמנט לדף עצמו כדי שיפעל בו או להוסיף אותו בהאדר או בפוטר להשפעה על כל דף בו הם מופיעים, כמובן שנצטרך לשקול מראש האם אנו צריכים מקש ימני בדף.

באלמנט הוספנו תגית סקריפט:
<script>
</script>

תגית זו מאפשרת לנו לכתוב קוד JS בתוך הhtml שלנו.

בתוך הscript הוספנו פקודות ותתי פקודות המקושרות עם נקודות ביניהן:

  • document ליצירת קוד המסוגל להשפיע על תכולת הדף הכללית.
  • addEventListener ליצירת תנאי שבו במקרה ספציפי שקורה נבצע פעולה.
  • נפתח סוגריים ובהם הוספנו מקרה ספציפי ומה יקרה כשהוא קורה:
    'contextmenu' הוא המקרה שלנו שהוא פתיחת התפריט של המקש הימני.
    event => event.preventDefault() היא הפונקציה שתקרה, הפונקציה מבטלת את פעולת ברירת המחדל שהיא לפתוח את התפריט של הלחצן הימני.

 

הקוד הסופי שיצא לנו פה:
<script>
document.addEventListener('contextmenu', event => event.preventDefault());
</script>

אין מקש ימני, אין אופציה לשמור את התמונה דרכו!

via GIPHY

אבל מה עשינו עם כל האלמנטים שאפשר לשמור דרכם????

איך העלמנו אלמנטים שאנו לא רוצים?

via GIPHY

כדי להעלים אלמנטים נצטרך css ואותו הוספנו גם לאלמנט הhtml.

באלמנט הוספנו תגית סטייל:
<style>
</style>

תגית זו מאפשרת לנו לכתוב קוד CSS בתוך הhtml שלנו.

הוספנו לפני document את הסימון // כך שנטרול המקש הימני לא יפעל לצורך הצעד הבא(וכמובן עדכננו את הדף).

פתחנו את הדף ונלחץ F12, לחצנו מקש ימני על האובייקט ולחצנו על Inspect, חיפשנו את הid או הclass של האובייקט אותו אנו רצינו להעלים בתוך לשונית הElements בחלק שסומן לנו והעתקנו, במקרה שלנו זו היתה הclass של האלמנט.

הסרנו לפני document את הסימון // כך שנטרול המקש הימני יפעל לצורך החזרה למצב הקודם(וכמובן עדכננו את הדף).

בתוך הstyle הוספנו:

  • נקודה לסימון class עם הclass שמצאנו לאלמנט ההורדה בגלריה שהוא eicon-share-arrow.
  • סוגריים מסולסלים לסימון פעולת עיצוב css ובתוכם:
    פקודת visibility שהיא מחליטה אם האובייקט נראה למשתמש.
    הגדרה לפעולה זו שהוא hidden שמגדירה שהאובייקט מוסתר.
    נקודה פסיק לסימון סיום שורה.

 

הקוד הסופי שיצא לנו פה:
<style>
.eicon-share-arrow{
visibility: hidden;
}
</style>

כמובן שזהו לא פתרון כולל אך הוא נתן לנו אופציה של לגרום לתיק העבודות שלנו להיות קצת יותר קשה להעתקה למשתמש היום יומי שנכנס אליו.

אם תרצו לתת מבט בתיק העבודות שלנו נסמוך עליכם שלא תעתיקו אותו:
תיק עבודות/https://ondigitalart.co.il
וכמובן אם אתם רוצים אתר איכותי או עבודת תכנות צרו איתנו קשר.

תוכן עניינים

מוזמנים ליצור קשר
לקוחות מספרים
מדריכים נוספים
מוזמנים ליצור קשר
לקוחות מספרים
דילוג לתוכן