Περιεχόμενο
- Βασικοί δρομείς ποντικιού
- Προσαρμοσμένοι δρομείς ποντικιού
- Αλλαγή του στυλ δρομέα με Inline Javascript
- Παίζοντας με λειτουργίες
Η αλλαγή του δρομέα του ποντικιού είναι ένας απλός τρόπος για να προσθέσετε ειδικά εφέ στην ιστοσελίδα σας. Αυτό μπορεί να βελτιώσει την χρηστικότητα παρέχοντας στους χρήστες πρόσθετα οπτικά βοηθήματα, ειδικά σε πιο πολύπλοκες σελίδες όπως παιχνίδια και διαδραστικούς χάρτες. Μπορείτε να χρησιμοποιήσετε το Javascript για να αλλάξετε το στυλ δρομέα ανάλογα με την ημερομηνία, τον καιρό και οτιδήποτε άλλο. Η τεχνική της χρήσης των Javascript, HTML και CSS για τη δημιουργία δυναμικών ιστοσελίδων είναι γνωστή ως DHTML (Dynamic HTML).
Βασικοί δρομείς ποντικιού
Υπάρχουν διάφοροι τυπικοί δείκτες ποντικιού που μπορούν να χρησιμοποιηθούν τροποποιώντας το στυλ ενός στοιχείου ή του σώματος της σελίδας. Τα ονόματα είναι προεπιλεγμένα, crosshair, χέρι, κίνηση, κείμενο, περιμένετε και βοηθήστε. Ανατρέξτε στην ενότητα "Ιδιότητα δρομέα CSS" στην ενότητα "Πόροι" για περισσότερες λεπτομέρειες σχετικά με αυτές. Χρησιμοποιήστε το CSS για να ορίσετε τον δρομέα που θα εμφανίζεται όταν περνάτε πάνω από ένα στοιχείο ως εξής:
Σταυρωτά μαλλιά
Προσαρμοσμένοι δρομείς ποντικιού
Εκτός από τους βασικούς δείκτες, μπορείτε να χρησιμοποιήσετε προσαρμοσμένα πρότυπα θέτοντας τη διεύθυνση ενός αρχείου εικόνας ως στυλ δρομέα, όπως στο παρακάτω παράδειγμα:
Προσαρμοσμένο δρομέα
Οχι όλα τα προγράμματα περιήγησης υποστηρίζουν αυτή τη λειτουργία ή όλους τους τύπους αρχείων. Για παράδειγμα, ο Internet Explorer αναμένει αρχεία με επέκταση ".cur" ή ".ani". Ο Firefox δεν δέχεται κινούμενους δρομείς (".ani") και αναμένει ένα βασικό δρομέα πέρα από την εικόνα. Για καλύτερα αποτελέσματα, υποδείξτε ένα αρχείο δρομέα (".cur" ή ".ani"), ένα αρχείο εικόνας (PNG, JPEG ή GIF) και ένα βασικό τύπο δρομέα ως αντίγραφο ασφαλείας. Το ακόλουθο παράδειγμα χρησιμοποιεί έναν κινούμενο δρομέα ως την πρώτη επιλογή, ένα απλό αρχείο στη δεύτερη θέση και τον βασικό δρομέα ως την τελευταία επιλογή. Το πρόγραμμα περιήγησης θα δοκιμάσει όλες τις επιλογές μέχρι να βρείτε ένα που μπορείτε να χρησιμοποιήσετε:
Προσαρμοσμένο δρομέα
Η Βιβλιοθήκη ανοικτού δρομέα στην ενότητα Πόροι προσφέρει συλλογές ελεύθερων δρομέων ποντικιού.
Αλλαγή του στυλ δρομέα με Inline Javascript
Μπορείτε να αλλάξετε το στυλ CSS του δρομέα χρησιμοποιώντας Javascript. Υπάρχουν πολλά χαρακτηριστικά HTML που σχετίζονται με τις ενέργειες του ποντικιού που μπορούν να χρησιμοποιηθούν για την εκτέλεση κώδικα κάνοντας κλικ, μετακίνηση ή μετακίνηση πάνω από ένα στοιχείο σελίδας. Μερικά παραδείγματα είναι:
onmouseover: Ο δείκτης του ποντικιού περνά πάνω από ένα στοιχείο. onmousedown: Πατήστε το κουμπί του ποντικιού. onmouseup: Το κουμπί του ποντικιού απελευθερώνεται. onmouseout: Ο δείκτης του ποντικιού εξέρχεται από το στοιχείο. ondblclick: Ο χρήστης κάνει διπλό κλικ στο ποντίκι.
Στην ενότητα "Χαρακτηριστικά" της ενότητας "Χαρακτηριστικά" θα βρείτε περισσότερα χαρακτηριστικά που μπορείτε να χρησιμοποιήσετε για να προσθέσετε ενέργειες με Javascript.
Προσθέστε μια ενέργεια σε ένα συμβάν (για παράδειγμα "ποντίκι") ορίζοντας τον κώδικα που θέλετε να εκτελέσετε ως τιμή του χαρακτηριστικού. Στο παρακάτω παράδειγμα, ο δρομέας θα αλλάξει σε "βοήθεια", τοποθετώντας το δείκτη του ποντικιού πάνω από το σύνδεσμο.
Βοήθεια
Παίζοντας με λειτουργίες
Μερικές φορές, θα θέλετε να κάνετε περισσότερες από μία ιδιότητες που επιτρέπουν. Καταγράφοντας όλες τις ενέργειες σε μια λειτουργία Javascript, μπορείτε να βάλετε όλο τον κώδικα στην κορυφή του εγγράφου HTML και να τον εφαρμόσετε σε οποιοδήποτε στοιχείο κάνοντας μια κλήση στο χαρακτηριστικό συμβάντος. Ο παρακάτω κώδικας αλλάζει τον κέρσορα στο στοιχείο που πέρασε ως παράμετρος "el":
συνάρτηση setElementCursor (el) {el.style.cursor = "url (3DArrow.cur), crosshair" GO "
Η λειτουργία θα εντοπιστεί στο τμήμα δέσμης ενεργειών της κεφαλίδας εγγράφου (μεταξύ των ετικετών
και ) ή σε ένα εξωτερικό αρχείο κώδικα που αναφέρεται στο ίδιο μέρος. Για να το χρησιμοποιήσετε, καλέστε τη λειτουργία με τη λέξη "αυτή" από ένα χαρακτηριστικό συμβάντος σε μια ετικέτα HTML. Η λειτουργία θα λάβει αναφορά στο στοιχείο που σχετίζεται με το συμβάν του ποντικιού και θα αλλάξει το στυλ δρομέα. Για παράδειγμα, αν ο δείκτης παραλείπει το παρακάτω κείμενο, ο κέρσορας αλλάζει:Ο δρομέας θα αλλάξει σε αυτόν τον σύνδεσμο
Μπορείτε επίσης να αλλάξετε τον κύριο δρομέα που θα εμφανιστεί όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το κάτω μέρος της σελίδας. Η παρακάτω λειτουργία θα σας επιτρέψει να αλλάξετε τον δρομέα στον τύπο που υποδεικνύεται στην παράμετρο "curtype":
συνάρτηση setMainCursor (curtype) {διακόπτης (curtype) {περίπτωση "φόρτωσης": document.body.style.cursor = "url (working.ani), url (working.png), περιμένετε"; break GO υπόθεση "απαγορευμένη": document.body.style.cursor = "url (unavailable.ani), url (unavailable.png), προεπιλογή"; break case "προεπιλογή": προεπιλογή: document.body.style.cursor = "url (arrow.cur), προεπιλογή" GO "}
Για να το χρησιμοποιήσετε, ονομάστε "φόρτωση", "απαγορεύεται" ή "προεπιλογή" από ένα χαρακτηριστικό συμβάντος σε μια ετικέτα HTML. Για παράδειγμα, το ακόλουθο κουμπί θα αλλάξει τον κέρσορα στη "φόρτωση" όταν κάνει κλικ:
Η γλώσσα Javascript έχει απεριόριστη λειτουργικότητα. Ο παρακάτω κώδικας θα μετράει και κάθε δευτερόλεπτο θα αλλάξει τον κέρσορα του ποντικιού σε μια εικόνα που σχετίζεται με την τρέχουσα τιμή. Η λειτουργία "setTimeOut" θα αφήσει τη λειτουργία να αναστέλλεται για ένα δευτερόλεπτο πριν την ανάκληση και την ενημέρωση του μετρητή.
συνάρτηση doCountdownCursor (count) {document.body.style.cursor = "url (" + count + ".ani), url (" + count + ".png) {setTimeout ("doCountdownCursor (" + count + "), 1000) GO} αλλιώς {document.body.style.cursor =" url (arrow.cur), προεπιλογή "GO}}
Στην ιστοσελίδα, χρησιμοποιήστε τη λειτουργία για να εμφανίσετε την καταμέτρηση στον κέρσορα του ποντικιού όταν κάνετε κλικ σε ένα κουμπί σε μια φόρμα.