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

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

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

אתה יכול להשיג את האפקט הזה באמצעות HTML, CSS ו-JavaScript באמצעות טכניקות CSS מסוימות ומושגי DOM של JavaScript.

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

אתה יכול להוסיף הסבר על תמונה ב-HTML באמצעות CSS ו-JavaScript.

הקוד המשמש בפרויקט זה זמין בזה ריפו של GitHub תחת רישיון MIT.

  1. בקובץ חדש בשם index.html, הוסף את המבנה הבסיסי של קובץ HTML:
    html>
    <html>
    <רֹאשׁ>
    <כותרת>דוגמה לכלי תמונהכותרת>
    רֹאשׁ>
    <גוּף>
    גוּף>
    html>
  2. בתוך תג הגוף, הוסף div container. div זה יכלול גם את התמונה וגם את רכיבי תיאור הכלים:
    <divמעמד="מְכוֹלָה">
    div>
    3. instagram viewer
  3. בתוך המיכל, הוסף תמונה. ודא שתמונה עם שם קובץ תואם נמצאת באותה תיקיה כמו קובץ ה-HTML שלך:
    <imgsrc="image.jpg"מעמד="תמונה"גוֹבַה="420"רוֹחַב="840"alt="התמונה שלך">
  4. מתחת לתמונה, הוסף div כדי לייצג את הסבר הכלי:
    <divמעמד="טיפים">div>
  5. בתג head, הוסף תג סטייל. בתוך תג הסגנון, הוסף קצת סגנון עבור מיכל התמונה ואת הסבר הכלי:
    <סִגְנוֹן>
    .מְכוֹלָה {
    עמדה: קרוב משפחה;
    לְהַצִיג: בלוק מוטבע;
     }

    .tooltip {
    עמדה: מוּחלָט;
    שמאלה: 0;
    לְהַצִיג: אף אחד;
    ריפוד: 5פיקסלים;
    צבע רקע: #000;
    צֶבַע: #fff;
    גודל גופן: 12פיקסלים;
     }
    סִגְנוֹן>
  6. צור תג סקריפט חדש בתחתית תג הגוף:
    <גוּף>
     תוכן דף האינטרנט שלך כאן 
    <תַסרִיט>
    תַסרִיט>
    גוּף>
  7. בתוך תג הסקריפט, השתמש בבורר DOM function, querySelector, כדי לקבל את רכיבי ה-HTML של התמונה ואת הסבר הכלי:
    const תמונה = מסמך.querySelector('.תמונה');
    const הסבר כלים = מסמך.querySelector('.tooltip');
  8. הוסף מאזין אירועים עבור העברה בעכבר מִקרֶה. פונקציה זו תפעל כאשר תרחף עם העכבר מעל התמונה. כאשר זה קורה, הסבר הכלי יוצג על המסך:
    image.addEventListener('מעבר עכבר', () => {
     tooltip.style.display = 'לַחסוֹם';
    });
  9. הוסף מאזין אירועים עבור יציאה בעכבר מִקרֶה. פונקציה זו תפעל כאשר העכבר עוזב את התמונה. כאשר זה קורה, הסבר הכלי ייעלם מהמסך:
    image.addEventListener('יציאה עכבר', () => {
     tooltip.style.display = 'אף אחד';
    });
  10. פתח את הקובץ index.html בכל דפדפן, ורחף מעל התמונה כדי להציג את הסבר הכלי:

כיצד לחשב ולהציג את קואורדינטות פיקסלים X ו-Y של התמונה

כעת, כאשר הסבר הכלי גלוי בדף, שנה את מיקומו ואת הטקסט שלו כדי להציג את קואורדינטות ה-X וה-Y של העכבר.

  1. שנה את סגנון ה-CSS של תיאור הכלים, כך שהסבר הכלי לא יהיה גלוי לפני שאתה מרחף מעל התמונה. זה מונע ממך לראות את הסבר הכלי בתחתית התמונה לפני קפיצה למיקום הסמן:
    .tooltip {
    עמדה: מוּחלָט;
    חלק עליון: -30 פיקסלים;
    שמאלה: 0;
    לְהַצִיג: אף אחד;
    ריפוד: 5פיקסלים;
    צבע רקע: #000;
    צֶבַע: #fff;
    גודל גופן: 12פיקסלים;
    }
  2. בתוך תג הסקריפט, הוסף עוד מאזין אירועים כדי להאזין ל להזיז עכבר מִקרֶה. פונקציה זו תפעל ברציפות בכל פעם שהעכבר מרחף מעל פיקסל חדש. הוסף את פרמטר האירוע, שיזין מידע על להזיז עכבר אירוע לתוך הפונקציה. מידע זה כולל את קואורדינטות התמונה היכן שהעכבר נמצא בנקודה זו:
    image.addEventListener('הזז עכבר', (ה) => {
    });
  3. באמצעות האירוע, שנה את המיקום האופקי של הסבר הכלים באמצעות מאפיין ה-CSS השמאלי. בכל פעם שהעכבר זז, זה יעדכן את הערך כך שיתאים לקואורדינטות ה-X של הסמן, המאוחסנות ב- clientX מִשְׁתַנֶה:
    tooltip.style.left = e.clientX + 'px';
  4. שנה את המיקום האנכי של הסבר הכלים באמצעות מאפיין ה-CSS העליון. ClientY מייצג את קואורדינטות ה-y של העכבר. ה offsetHeight המאפיין כולל כל ריפוד או גבולות נוספים בתוך הסבר הכלי. מכיוון שאינך רוצה את הסבר הכלי ישירות במקום בו נמצא הסמן, תוכל להסיר 10 פיקסלים נוספים מהמיקום:
    tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'px';
  5. שנה את תוכן הטקסט של הסבר הכלי כדי להציג את הקואורדינטות:
    tooltip.textContent = `X: ${e.offsetX},Y: ${e.offsetY}`;
  6. פתח את הקובץ index.html בכל דפדפן, ורחף מעל התמונה כדי לראות את הסבר הכלי המעודכן:

הוספת אפקטים לדף האינטרנט האינטראקטיבי שלך

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