Η αλλαγή ενός δείκτη του ποντικιού στην Javascript

Αλλαγή του δείκτη του ποντικιού είναι ένας απλός τρόπος για να τζαζ μέχρι την ιστοσελίδα σας με δροσερό ειδικά εφέ . Ποντίκι στυλ δρομέα μπορεί να βελτιωθεί η χρηστικότητα της ιστοσελίδας σας , παρέχοντας στους χρήστες σας με επιπλέον οπτική πληροφόρηση , ιδίως για τις περισσότερο πολύπλοκες δέσμες ενεργειών ιστοσελίδων , όπως τα παιχνίδια και διαδραστικούς χάρτες . Javascript μπορεί να χρησιμοποιηθεί για να τροποποιήσετε το στυλ κέρσορα του ποντικιού , επιτρέποντάς σας να αλλάξετε το δείκτη του ποντικιού με βάση την σημερινή ημερομηνία , το δελτίο καιρού ή σχεδόν οτιδήποτε άλλο μπορείτε να φανταστείτε . Η τεχνική της χρήση Javascript , HTML και CSS μαζί για να δημιουργήσουν δυναμικές ιστοσελίδες είναι DHTML ( Dynamic HTML ) . Basic Mouse δρομείς
Η

Υπάρχουν αρκετές προεπιλεγμένο δρομέων ποντίκι που μπορεί να χρησιμοποιηθεί τροποποιώντας το στυλ ενός στοιχείου σελίδας ή σώμα του εγγράφου . Αυτές οι μορφές περιλαμβάνουν δρομέα προεπιλογή , σταυρόνημα , το χέρι , κίνηση , κείμενο , wai και βοήθεια. Βλ. «Η CSS δρομέα Ακίνητα " που συνδέεται στην ενότητα Πόροι για περισσότερες λεπτομέρειες σχετικά με όλες τις βασικές μορφές του δρομέα . Το στυλ δρομέα εμφανίζεται όταν το ποντίκι πάνω από ένα στοιχείο μπορεί να ρυθμιστεί με τη χρήση CSS , όπως σε αυτό το παράδειγμα :

Cross - μαλλιά
εικόνων Προσαρμοσμένη Mouse δρομείς
Η

Εκτός από τις βασικές δρομείς , έθιμο δρομείς μπορούν να χρησιμοποιηθούν από τον καθορισμό του στυλ δρομέα στη διεύθυνση ενός αρχείου δρομέα ή εικόνας, όπως και στην το ακόλουθο παράδειγμα :

Προσαρμοσμένη κέρσορα

υποστήριξη του προγράμματος περιήγησης για τον κέρσορα μορφές και τύπους αρχείων είναι ασυνεπής . Για παράδειγμα , ο Internet Explorer αναμένει τα αρχεία δρομέα με . Τρέχουσα ή . Ani επεκτάσεις . Firefox δεν αρέσει κινούμενους δρομείς ( ani αρχεία . ) , Και αναμένει ένα βασικό δείκτη να αναγράφονται πέραν δρομέα ή αρχείο εικόνας . Για καλύτερα αποτελέσματα μεταξύ των browsers , παρέχει ένα αρχείο δρομέα ( . Τρέχουσα ή . Ani ) , ένα αρχείο εικόνας ( PNG , JPEG ή GIF ) , και ένας βασικός τύπος δρομέα ως εφεδρική . Αυτό το παράδειγμα χρησιμοποιεί ένα κινούμενο δρομέα για την πρώτη επιλογή της , ένα απλό αρχείο δρομέα ως δεύτερη επιλογή και την προεπιλογή βασικό δείκτη ως την τελική επιλογή επαναφοράς . Το πρόγραμμα περιήγησης θα προσπαθήσει κάθε επιλογή μέχρι να βρει ένα μπορεί να χρησιμοποιήσει .

? Προσαρμοσμένη κέρσορα

Η «Ανοικτή δρομέας Βιβλιοθήκη " που συνδέεται στην ενότητα Πόροι προσφέρει δωρεάν , χωρίς ταλαιπωρία συλλογές κέρσορα του ποντικιού

Η Αλλαγή του Στυλ του δρομέα . με Inline Javascript
Η

Μπορείτε να αλλάξετε το δείκτη του ποντικιού CSS στυλ με Javascript . Υπάρχουν πολλά χαρακτηριστικά HTML σχετίζονται με κινήσεις του ποντικιού , μπορείτε να χρησιμοποιήσετε για να εκτελέσει Javascript όταν το ποντίκι κλικ , μετακινηθεί ή αιωρούνταν πάνω από ένα στοιχείο της ιστοσελίδας . Μερικά από αυτά τα χαρακτηριστικά είναι τα εξής:

onmouseover : Ο δείκτης του ποντικιού αιωρείται πάνω από το elementonmousedown : κουμπί του ποντικιού pressedonmouseup : κουμπί του ποντικιού releasedonmouseout : Mouse δείκτης μετακινείται μακριά από το elementonclick : κουμπί του ποντικιού clickedondblclick : κουμπί του ποντικιού διπλό κλικ

Ανατρέξτε στην ενότητα " χαρακτηριστικά Event " σύνδεσμο στην ενότητα Πόροι για περισσότερες εκδήλωση χαρακτηριστικά που μπορείτε να χρησιμοποιήσετε για να προσθέσετε ενέργειες Javascript .

Προσθέστε μια δράση Javascript σε μια εκδήλωση , όπως ένα ποντίκι -over , απλώς με τον καθορισμό αξία του χαρακτηριστικό για τον κώδικα Javascript που θέλετε να εκτελεστεί. Σε αυτό το παράδειγμα , ο δρομέας αλλάζει τη βασική "βοήθεια" του δρομέα όταν το ποντίκι περνάει πάνω από τον σύνδεσμο :

Βοήθεια
εικόνων Διασκέδαση με λειτουργίες
Η

Μερικές φορές , θέλετε να κάνετε περισσότερα από ό, τι χωράει άνετα σε ένα χαρακτηριστικό του ποντικιού. Με το γράψιμο όλες τις ενέργειές σας σε μια συνάρτηση Javascript , μπορείτε να χώνω όλο σας τον κώδικα στην κορυφή του εγγράφου HTML σας , και να προκαλέσει τον κέρσορα μαγεία σας για να συμβεί με μια απλή κλήση της συνάρτησης στο χαρακτηριστικό συμβάν . Αυτή η απλή λειτουργία Javascript αλλάζει το στυλ δρομέα για το στοιχείο της ιστοσελίδας πέρασε ως παράμετρο " el " :

setElementCursor λειτουργία (el ) { el.style.cursor = " url ( 3DArrow.cur ) , σταυρόνημα " ? }

Αυτή η λειτουργία βρίσκεται σε ένα τμήμα δέσμης ενεργειών στην κεφαλίδα του εγγράφου ( μεταξύ και ) , ή σε ένα εξωτερικό αρχείο κώδικα Javascript που αναφέρεται στην επικεφαλίδα του έγγραφο. Για να χρησιμοποιήσετε αυτή τη λειτουργία , να καλέσετε τη συνάρτηση με τη λέξη "αυτό " από ένα χαρακτηριστικό περιστατικό σε μια ετικέτα HTML . Η λειτουργία δέχεται μια αναφορά στο στοιχείο της ιστοσελίδας που συνδέεται με την εκδήλωση του ποντικιού , και αλλάζει το στυλ του δρομέα . Για παράδειγμα , όταν ο δείκτης κινείται πάνω από αυτό το συνδεδεμένο κείμενο , ο δρομέας εμφανίζεται θα πρέπει να καθορίζεται από τη λειτουργία :

Ρυθμίστε το δρομέα για αυτόν τον σύνδεσμο

Μπορείτε επίσης να αλλάξετε τον κύριο δείκτη που εμφανίζεται όταν ο δρομέας είναι πλανάται πάνω από το φόντο της σελίδας web . Αυτή η λειτουργία Javascript που θέτει το δείκτη του ποντικιού για το κύριο σώμα της ιστοσελίδας με βάση την τιμή μεταβιβάστηκε στη λειτουργία ως παράμετρο " curtype " :

setMainCursor λειτουργία ( curtype ) { διακόπτη ( curtype ) { περίπτωση " φόρτωσης" : document.body.style.cursor = " url ( working.ani ) , url ( working.png ) , περιμένετε " ? σπάσει ? υπόθεση «απαγορεύεται» : document.body.style.cursor = " url ( unavailable.ani ) , url ( unavailable.png ) , εξ 'ορισμού " ? σπάσει ? υπόθεση" default " : default : document.body.style.cursor = " url ( arrow.cur ) , default " ? } }

Για να χρησιμοποιήσετε αυτή τη λειτουργία , να καλέσετε τη συνάρτηση με την τιμή " φόρτωσης ", " απαγορεύεται " ή "default" από ένα χαρακτηριστικό περιστατικό σε μια ετικέτα HTML . Για παράδειγμα , αυτή η μορφή κουμπί υποβολής καλεί τη λειτουργία για να ρυθμίσετε τον κέρσορα στο " φόρτωσης" , όταν κάνετε κλικ στο κουμπί :

δεν υπάρχει όριο στο τι μπορείτε να κάνετε με τις λειτουργίες Javascript . Η παρακάτω συνάρτηση εκτελεί μια αντίστροφη μέτρηση με αλλαγή του κύριο δείκτη του ποντικιού κάθε δευτερόλεπτο σε μια εικόνα του δρομέα που σχετίζονται με την τρέχουσα μέτρηση . Η λειτουργία setTimeout χρησιμοποιείται για να προκαλέσει τη λειτουργία για να κοιμηθεί για ένα δευτερόλεπτο πριν αυτό ονομάζεται και πάλι με το επικαιροποιημένο μετράνε .

DoCountdownCursor λειτουργία ( μέτρηση) { document.body.style.cursor = " url ( " + αριθμός + " . ani ) , url ( " + αριθμός + " png ) , περιμένετε . "? μετράνε - ? εάν (count > 0 ) { setTimeout ( " doCountdownCursor ( " + αριθμός + " ) " , 1000 ) ? } else { document.body.style.cursor = " url ( arrow.cur ) , default " ? } }

στην ιστοσελίδα , χρησιμοποιήστε αυτή τη λειτουργία για να έχει ο κέρσορας του ποντικιού μετρήσει αντίστροφα από το 10 , όταν μια μορφή κουμπί υποβολής έχει πατηθεί.

Η
εικόνων