Αυτή η ανάρτηση θα δείξει τη διαδικασία αλλαγής της εικόνας κατά την τοποθέτηση του δείκτη σε JavaScript.
Πώς να αλλάξετε μια εικόνα στο Hover σε JavaScript;
Για να αλλάξετε την εικόνα στο δείκτη του ποντικιού, χρησιμοποιήστε το ' επί του ποντικιού ' Εκδήλωση. Όταν το ποντίκι/δρομέας μετακινείται μέσω ενός στοιχείου HTML ή ενός από τα θυγατρικά του, ενεργοποιείται το συμβάν onmouseover.
Παράδειγμα 1: Αλλαγή εικόνας στο Hover σε JavaScript
Σε ένα αρχείο HTML, χρησιμοποιήστε την ετικέτα για να εμφανίσετε την εικόνα σε μια ιστοσελίδα. Επισυνάψτε το ' επί του ποντικιού ” συμβάν που θα καλέσει τη συνάρτηση JavaScript όταν το ποντίκι τοποθετηθεί πάνω από την εικόνα:
< img id = 'menuImg' src = '1.jpg' επί του ποντικιού = 'Hover(this);' />
Σε ένα αρχείο JavaScript, ορίστε μια συνάρτηση ' φτερουγίζω 'με την παράμετρο' img '. Στην καθορισμένη συνάρτηση, ρυθμίστε την εικόνα που θα εμφανίζεται στο δείκτη του ποντικιού:
λειτουργία φτερουγίζω ( img )
{
img. src = '2.jpg'
}
Όπως μπορείτε να δείτε, στην έξοδο, όταν τοποθετούμε το δείκτη του ποντικιού πάνω από την τρέχουσα εικόνα, αλλάζει ξαφνικά:
Παράδειγμα 2: Εναλλαγή της εικόνας στο Hover
Στο παραπάνω παράδειγμα, η εικόνα αλλάζει όταν το ποντίκι αιωρείται πάνω από την εικόνα και παραμένει η ίδια εικόνα. Τώρα, σε αυτό το παράδειγμα, η πρώτη εικόνα θα εμφανιστεί ξανά όταν το ποντίκι μετακινηθεί έξω από την εικόνα. Αυτό το εφέ ονομάζεται εφέ εναλλαγής. Για το σκοπό αυτό, θα χρησιμοποιήσουμε το « επί του ποντικιού ' και ' onmouseout ” Ιδιότητες HTML:
< img id = 'menuImg' src = '1.jpg' επί του ποντικιού = 'Hover(this);' onmouseout = 'HoverOut (αυτό)' />
' επί του ποντικιού 'καλεί το ' φτερουγίζω() 'λειτουργεί ενώ, το ' onmouseout 'το συμβάν καλεί τη συνάρτηση' hoverOut() ”:
λειτουργία hoverOut ( img ) {img. src = '1.jpg'
}
Η έξοδος δείχνει ότι η εικόνα αλλάζει με επιτυχία όταν το ποντίκι είναι πάνω από την εικόνα και αλλάζει όταν το ποντίκι βγαίνει από την εικόνα:
Αυτό αφορούσε την αλλαγή της εικόνας κατά την αιώρηση.
συμπέρασμα
Για να αλλάξετε την εικόνα κατά την αιώρηση, χρησιμοποιήστε το ' επί του ποντικιού ' Εκδήλωση. Για εφέ εναλλαγής, χρησιμοποιήστε το ' επί του ποντικιού 'ιδιότητα με ' onmouseout ' Εκδήλωση. Όταν το ποντίκι/ο δείκτης μετακινείται μέσω ενός στοιχείου ή ενός από τα παιδιά του, ενεργοποιείται το συμβάν onmouseover, ενώ όταν το ποντίκι/δείκτης μετακινηθεί έξω από ένα στοιχείο, εμφανίζεται το συμβάν onmouseout. Σε αυτήν την ανάρτηση, παρουσιάσαμε τη διαδικασία αλλαγής της εικόνας κατά την τοποθέτηση του ποντικιού σε JavaScript.