Τι είναι ένας προσαρμοσμένος δείκτης;

Ένας προσαρμοσμένος δείκτης είναι ένας δείκτης ποντικιού που ορίζεται από τον χρήστη και αντικαθιστά το προεπιλεγμένο βέλος ή εικονίδιο δείκτη του προγράμματος περιήγησης. Τα ιστοσελίδες και οι εφαρμογές χρησιμοποιούν προσαρμοσμένους δείκτες για να ενισχύσουν την επωνυμία, να βελτιώσουν την εμβάπτιση σε παιχνίδια ή δημιουργικές εμπειρίες, ή απλώς για να προσθέσουν μια μοναδική οπτική αφή σε μια διεπαφή. Οι προσαρμοσμένοι δείκτες ορίζονται συνήθως στο CSS χρησιμοποιώντας την ιδιότητα cursor με μια τιμή url() που δείχνει σε ένα αρχείο εικόνας όπως .cur, .png ή .svg.

Τα προγράμματα περιήγησης ιστού υποστηρίζουν αρκετές μορφές αρχείων δείκτη εγγενώς. Η μορφή .cur είναι η κλασική μορφή δείκτη Windows, το .ani προσθέτει υποστήριξη κινούμενων εικόνων, ενώ τα .png και .svg προσφέρουν σύγχρονες, ανεξάρτητες από την ανάλυση εναλλακτικές που λειτουργούν σε όλες τις πλατφόρμες.

Περιγραφή εργαλείου

Το Custom Cursor Tester σας επιτρέπει να ανεβάσετε οποιοδήποτε αρχείο δείκτη και να δείτε αμέσως πώς φαίνεται και συμπεριφέρεται στο πρόγραμμα περιήγησης. Μόλις ανεβεί, ο δείκτης σας αντικαθιστά το προεπιλεγμένο δείκτη μέσα σε μια αποκλειστική περιοχή δοκιμής — μια περιοχή προβολής με σχέδιο καρό με ένα κουμπί — ώστε να μπορείτε να αξιολογήσετε τόσο την κίνηση σε ελεύθερο χώρο όσο και τη συμπεριφορά hover χωρίς να γράψετε ούτε μια γραμμή CSS.

Υποστηριζόμενες μορφές

Μορφή Περιγραφή
.cur Μορφή δείκτη Windows, ευρέως υποστηριζόμενη
.ani Κινούμενος δείκτης Windows
.png Ράστερ εικόνα, ιδανική για δείκτες υψηλής ποιότητας
.svg Κλιμακώσιμη διανυσματική εικόνα, ευκρινής σε οποιοδήποτε μέγεθος
.ico Μορφή εικονιδίου Windows, χρησιμοποιήσιμη και ως δείκτης

Χαρακτηριστικά

  • Άμεση προεπισκόπηση: Ο δείκτης εφαρμόζεται ζωντανά μόλις ανεβεί το αρχείο — δεν απαιτείται επαναφόρτωση σελίδας
  • Διαδραστική περιοχή δοκιμής: Η περιοχή προβολής με σχέδιο καρό εμφανίζει τον δείκτη σε ουδέτερο φόντο για σαφή ορατότητα
  • Στόχος δοκιμής κουμπιού: Ένα κουμπί μέσα στην περιοχή δοκιμής σας επιτρέπει να επαληθεύσετε τη συμπεριφορά του δείκτη σε διαδραστικά στοιχεία
  • Συνεπής κληρονομιά δείκτη: Το κουμπί κληρονομεί τον προσαρμοσμένο δείκτη αντί να επιστρέφει στο προεπιλεγμένο δείκτη του προγράμματος περιήγησης
  • Μόνο στην πλευρά του πελάτη: Τα αρχεία διαβάζονται απευθείας στο πρόγραμμα περιήγησης και δεν ανεβαίνουν ποτέ σε κανέναν διακομιστή

Περιπτώσεις χρήσης

  • Σχεδιαστές δείκτη: Επαληθεύστε πώς φαίνεται ένα νέο αρχείο δείκτη .cur ή .png πριν το αποστείλετε
  • Προγραμματιστές ιστού: Δοκιμάστε γρήγορα ένα περιουσιακό στοιχείο δείκτη πριν το ενσωματώσετε στο CSS με την ιδιότητα cursor: url(...)
  • Προγραμματιστές παιχνιδιών και δημιουργικοί: Ελέγξτε την αίσθηση και την ορατότητα προσαρμοσμένων δεικτών σε διαδραστικά περιβάλλοντα διεπαφής

Πώς λειτουργεί

Όταν ανεβάζετε ένα αρχείο, το εργαλείο δημιουργεί μια διεύθυνση URL αντικειμένου για αυτό χρησιμοποιώντας το API URL.createObjectURL() του προγράμματος περιήγησης και το εισάγει ως στυλ CSS cursor στην περιοχή δοκιμής. Αυτό είναι ισοδύναμο με το να γράψετε cursor: url(your-file.cur), auto σε ένα φύλλο στυλ. Το εναλλακτικό auto διασφαλίζει ότι το πρόγραμμα περιήγησης χρησιμοποιεί τον προεπιλεγμένο δείκτη του εάν το αρχείο δεν μπορεί να φορτωθεί ή να αναλυθεί.

Συμβουλές

  • Για δείκτες .png, το πρόγραμμα περιήγησης χρησιμοποιεί την επάνω αριστερή γωνία (0 0) ως σημείο ενεργοποίησης από προεπιλογή. Εάν το ενεργό σημείο του δείκτη σας θα πρέπει να είναι αλλού (π.χ. η άκρη ενός μολυβιού), ίσως χρειαστεί να το προσαρμόσετε στο CSS μετά τη δοκιμή.
  • Οι κινούμενοι δείκτες .ani αναπαράγονται αυτόματα σε προγράμματα περιήγησης που τα υποστηρίζουν (κυρίως βασισμένα σε Chromium).
  • Οι δείκτες SVG πρέπει να είναι μικροί (συνήθως κάτω από 128×128 px) για να αποδοθούν σωστά ως δείκτες στα περισσότερα προγράμματα περιήγησης.