פוסט זה ידגים את ההליך לשינוי התמונה ברחף ב-JavaScript.
כיצד לשנות תמונה ב-Hover ב-JavaScript?
לשינוי התמונה ברחף, השתמש ב-' מעבר עכבר 'אירוע. כאשר העכבר/סמן מועברים דרך רכיב HTML או אחד מהילדים שלו, אירוע ה-onmouseover מופעל.
דוגמה 1: שנה תמונה ב-Hover ב-JavaScript
בקובץ HTML, השתמש בתג כדי להציג את התמונה בדף אינטרנט. צרף את ' מעבר עכבר ' אירוע שיקרא לפונקציית JavaScript כאשר העכבר ירחף מעל התמונה:
< זיהוי img = 'menuImg' src = '1.jpg' מעבר עכבר = 'רחף(זה);' />
בקובץ JavaScript, הגדר פונקציה ' לְרַחֵף ' עם הפרמטר ' img '. בפונקציה המוגדרת, הגדר את התמונה שתוצג בריחוף:
פוּנקצִיָה לְרַחֵף ( img )
{
img. src = '2.jpg'
}
כפי שניתן לראות, בפלט, כאשר אנו מרחפים מעל התמונה הנוכחית, היא משתנה לפתע:
דוגמה 2: החלף את התמונה על הרחף
בדוגמה שלמעלה, התמונה משתנה כאשר העכבר מרחף מעל התמונה, ואותה תמונה נשארת. כעת, בדוגמה זו, התמונה הראשונה תופיע שוב כאשר העכבר יזוז מהתמונה. אפקט זה נקרא אפקט המעבר. לשם כך, נשתמש ב' מעבר עכבר ' ו' onmouseout 'מאפייני HTML:
< זיהוי img = 'menuImg' src = '1.jpg' מעבר עכבר = 'רחף(זה);' onmouseout = 'רחף אאוט(זה)' />
' מעבר עכבר 'קורא ל' לְרַחֵף() ' פונקציה בזמן, ' onmouseout ' אירוע קורא לפונקציה ' hoverOut() ”:
פוּנקצִיָה לרחף החוצה ( img ) {img. src = '1.jpg'
}
הפלט מראה שהתמונה משתנה בהצלחה כאשר העכבר נמצא מעל התמונה והיא משתנה כאשר העכבר יוצא מהתמונה:
זה היה הכל על התמונה המשתנה על ריחוף.
סיכום
לשינוי התמונה עם ריחוף, השתמש ב-' מעבר עכבר 'אירוע. להחלפת אפקט, השתמש ב-' מעבר עכבר ' תכונה עם ' onmouseout 'אירוע. כאשר העכבר/הסמן מוזז דרך אלמנט או אחד מילדיו, אירוע ה-onmouseover מופעל, בעוד כאשר העכבר/המצביע מועבר אל מחוץ לאלמנט, מתרחש אירוע ה-onmouseout. בפוסט זה הדגמנו את ההליך לשינוי התמונה ברחף ב-JavaScript.