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

Τυπική υπόδειξη

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

Σε ένα από τα προηγούμενα άρθρα, χρησιμοποίησα μια εικόνα μιας τίγρης για να δείξω ότι δουλεύω με μεγέθη εικόνων. Αν δεν σας πειράζει, θα χρησιμοποιήσω ξανά αυτήν την εικόνα. Έτσι, για να εμφανίσετε μια υπόδειξη, πρέπει απλώς να προσθέσετε το χαρακτηριστικό τίτλος και να γράψετε το επιθυμητό κείμενο σε αυτό.

< img src = "tiger.jpg" title = "Αυτή είναι μια τίγρη" >

Μπορεί να υπάρχουν είτε μία λέξη είτε πολλές προτάσεις. Και αυτό είναι πώς φαίνεται:

Η υπόδειξη εμφανίζεται ομαλά, όχι αμέσως μετά την αιώρηση, αλλά μετά από κάποιο χρονικό διάστημα. Αυτή είναι η προεπιλεγμένη συμπεριφορά.

Το κύριο πρόβλημα με μια τέτοια συμβουλή εργαλείου είναι ότι δεν μπορεί να σχηματοποιηθεί. Πώς να λύσετε αυτό το πρόβλημα; Θα πρέπει να δώσουμε μια υπόδειξη με άλλους τρόπους. Τώρα θα σας δείξω ένα ζευγάρι.

Καθαρή μέθοδος css

Ένας πολύ ενδιαφέρον τρόπος που σας επιτρέπει να εμφανίσετε όμορφα μια υπόδειξη για μια εικόνα. Η σήμανση HTML είναι απλή, μόνο η εικόνα πρέπει να περικλείεται σε ένα μπλοκ κοντέινερ, στο οποίο θα εκχωρήσουμε ένα αναγνωριστικό, ώστε να μπορούμε αργότερα να αναφερθούμε σε αυτό σε στυλ:

< div id = "tiger" data - name = "Τίγρη της Σουμάτρας"> < img src = "tiger.jpg" > < / div >

Το μόνο πράγμα που μπορεί να σας είναι ασαφές εδώ είναι το χαρακτηριστικό data-name. Το θέμα είναι ότι αυτό είναι ένα λεγόμενο χαρακτηριστικό δεδομένων που δεν κάνει τίποτα από μόνο του, αλλά η τιμή του μπορεί να χρησιμοποιηθεί σε css και javascript, κάτι που το καθιστά χρήσιμο σε ορισμένες περιπτώσεις. Θα το δείτε στη συνέχεια.

Λοιπόν, πρώτα, ας περιγράψουμε τα στυλ για το δοχείο. Χρειαζόμαστε σχετική τοποθέτηση γιατί θα τοποθετήσουμε απολύτως το μπλοκ με επεξηγηματικό κείμενο έτσι ώστε η τοποθέτηση να γίνεται σε σχέση με το γονικό μπλοκ και όχι ολόκληρη τη σελίδα.

#tiger( θέση: σχετική; οθόνη: ενσωματωμένο μπλοκ; )

#τίγρη( θέση: σχετική; οθόνη: inline - block;

Η εμφάνιση γραμμής μπλοκ θα εμποδίσει το μπλοκ (και μαζί με αυτό το μπλοκ με την επεξήγηση εργαλείου που θα δημιουργήσουμε) να τεντωθεί σε όλο το πλάτος του παραθύρου. Το μόνο που μένει είναι να δημιουργηθεί η ίδια η υπόδειξη. Στο CSS είναι πολύ βολικό να το κάνετε αυτό χρησιμοποιώντας ψευδοστοιχεία. Σαν αυτό:

#tiger:hover:after ( περιεχόμενο: attr(όνομα δεδομένων); θέση: απόλυτη; αριστερά: 0; κάτω: 0; φόντο: rgba(5,13,156,.55); χρώμα: #fff; στοίχιση κειμένου: κέντρο ; οικογένεια γραμματοσειράς: διαγράμμιση, μέγεθος γραμματοσειράς: 14 εικονοστοιχεία, συμπλήρωση: 3 εικονοστοιχεία 0, πλάτος: 100%; )

#tiger:hover:after ( περιεχόμενο: attr (δεδομένα - όνομα); θέση: απόλυτη; αριστερά: 0; κάτω: 0; φόντο: rgba(5, 13, 156, . 55); χρώμα : #fff; κείμενο - στοίχιση : κέντρο ; γραμματοσειρά - οικογένεια : cursive ; μέγεθος γραμματοσειράς: 14 px; padding: 3px 0; πλάτος: 100%;

Υπάρχει πολύς κώδικας, αλλά δεν υπάρχει τίποτα περίπλοκο εδώ. Ο επιλογέας #tiger:hover:after σημαίνει το εξής: όταν τοποθετούμε τον δείκτη του ποντικιού πάνω από ένα μπλοκ με μια εικόνα, πρέπει να δημιουργήσουμε ένα ψευδοστοιχείο μετά (και στη συνέχεια οι κανόνες παρατίθενται σε σγουρά άγκιστρα). Η ιδιότητα content: attr(όνομα δεδομένων) ορίζει την τιμή κειμένου του μπλοκ. Θα είναι ίσο με αυτό που γράφεται στο χαρακτηριστικό data-name του μπλοκ περιτυλίγματος εικόνας.

Αυτή η επεξήγηση εργαλείου εμφανίζεται όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την εικόνα, αλλά σε αντίθεση με την τυπική, το κάνει απότομα και η ίδια η εμφάνιση εμφανίζεται αμέσως τη στιγμή της τοποθέτησης του δείκτη του ποντικιού. Σε αυτήν την περίπτωση, δεν θα είναι δυνατή η υλοποίηση μιας ομαλής μετάβασης, επειδή οι ομαλές μεταβάσεις δεν υποστηρίζονται για ψευδοστοιχεία.

Μέθοδος 2. Καθαρό css και ομαλή εμφάνιση

Ωστόσο, ξαναγράφοντας τον κώδικα αρκετά, μπορείτε να επιτύχετε μια ομαλή εμφάνιση της συμβουλής εργαλείου και, πάλι, χωρίς τη χρήση javascript.

Για να δείτε μόνοι σας τα 2 εφέ που θα σας δείξω στη συνέχεια, προτείνω να ανοίξετε το Σημειωματάριο ή οποιοδήποτε βολικό πρόγραμμα επεξεργασίας κώδικα και να επαναλάβετε τα πάντα μετά από εμένα. Είναι αλήθεια ότι για αυτό πρέπει ακόμα να συμπεριλάβετε ένα αρχείο στυλ, αν και τα στυλ μπορούν επίσης να γραφτούν σε html σε ετικέτες

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

Στυλ CSS για συμβουλές εργαλείων

Σύντομα θα κάνουμε τις συμβουλές εργαλείων να λειτουργούν με τον ίδιο τρόπο σε διαφορετικά προγράμματα περιήγησης. Τώρα ας προσθέσουμε μερικές γραμμές κώδικα CSS.

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

CSS για εμφάνιση συμβουλής εργαλείου

.tooltip:hover span ( γραμματοσειρά-οικογένεια: Calibri, Tahoma, Geneva, sans-serif; θέση: απόλυτη; αριστερά: 1em; επάνω: 2em; z-index: 99; margin-αριστερό: 0; πλάτος: 250px; ) . tooltip:hover img ( περιθώριο: 0; περιθώριο: -10 px 0 0 -55 px; float: αριστερά; θέση: απόλυτη; ) .tooltip:hover em ( γραμματοσειρά: Candara, Tahoma, Geneva, sans-serif; μέγεθος γραμματοσειράς : 1,2em; βάρος γραμματοσειράς: έντονη γραφή; οθόνη: μπλοκ; συμπλήρωση: 0,2em 0 0,6em 0; ) .classic ( padding: 0,8em 1em; ) .custom ( padding: 0,5em 0,8em 0,8em 2em; ) *html a:hover (φόντο: διαφανές; )

Χρειάζεται συμβολοσειρά *html

Ίσως αναρωτιέστε γιατί περιλαμβάνεται η τελευταία γραμμή στον παραπάνω κώδικα; Ορίζει τη διαφάνεια για το φόντο του συνδέσμου. Κατά τη δοκιμή συμβουλών εργαλείων, ανακάλυψα ένα περίεργο εφέ στον IE6 που δεν μπορούσε να αφαιρεθεί όσο υπήρχε το φόντο του συνδέσμου!

Ο παραπάνω κώδικας διασφαλίζει τη λειτουργικότητα των συμβουλών εργαλείων. Εμφανίζονται στην οθόνη, αλλά είναι αρκετά δύσκολο να διαχωριστούν από το γενικό κείμενο. Δεν υπάρχουν συνδυασμοί χρωμάτων που κάνουν το κείμενο συμβουλής εργαλείου να ξεχωρίζει στη σελίδα.

Ορίστε το συνδυασμό χρωμάτων για συμβουλές εργαλείων/

Ο ακόλουθος κώδικας ορίζει έναν συνδυασμό χρωμάτων για καθένα από τα πέντε στυλ συμβουλών εργαλείων.

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

Κωδικός CSS για συνδυασμό χρωμάτων

.classic ( φόντο: #FFFFAA; περίγραμμα: 1px συμπαγές #FFAD33; ) .critical ( φόντο: #FFCCAA; περίγραμμα: 1px στερεό #FF3334; ) .help ( φόντο: #9FDAEE; περίγραμμα: 1px συμπαγές #2BB0D7; ) .info ( φόντο: #9FDAEE; περίγραμμα: 1px συμπαγές #2BB0D7; ) .warning ( φόντο: #FFFFAA; περίγραμμα: 1px συμπαγές #FFAD33; )

Ο κώδικας CSS είναι πολύ απλός, αλλά δίνει υπέροχη εμφάνιση στις συμβουλές εργαλείων και κάνει τη δουλειά του παντού. Ο συνδυασμός χρωμάτων μπορεί να αλλάξει κατά την κρίση σας.

Μερικές πινελιές CSS3 για προηγμένη εμφάνιση συμβουλών εργαλείων

Πριν ολοκληρώσουμε αυτό το σεμινάριο, θα προσθέσουμε μερικές γραμμές κώδικα CSS3 για να προσθέσουμε οπτικά εφέ στις συμβουλές εργαλείων μας. Ας ορίσουμε στρογγυλεμένες γωνίες χρησιμοποιώντας την ιδιότητα border-radius και προσθέτουμε κάποια διάσταση χρησιμοποιώντας την ιδιότητα box-shadow.

Δεδομένου ότι καμία από αυτές τις ιδιότητες δεν υποστηρίζεται παγκοσμίως, θα λειτουργούν μόνο σε ορισμένες από τις πιο πρόσφατες εκδόσεις του προγράμματος περιήγησης. Αλλά όπου λειτουργούν, οι συμβουλές εργαλείων θα φαίνονται κομψές και σέξι!

Ας προσθέσουμε τον παρακάτω κώδικα στο selector.tooltip:hover span και ας ανανεώσουμε τη σελίδα.

Τα οπτικά εφέ για περίγραμμα, σκίαση και διαφάνεια ανυψώνουν την επεξήγηση εργαλείου πάνω από το κείμενο της σελίδας και κάνουν τις πληροφορίες αντίθετες και ευανάγνωστες.

Μπορεί να παρατηρήσετε ότι δεν χρησιμοποιούνται μόνο οι επίσημες ιδιότητες CSS3, αλλά και επεκτάσεις για το Mozilla και το WebKit.

Πρόσθετες ιδιότητες CSS για νέα προγράμματα περιήγησης

περίγραμμα-ακτίνα: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0,1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0,1);

Περίληψη

Αυτό το σεμινάριο δείχνει ότι η βελτίωση της διεπαφής δεν απαιτεί μεγάλη προσπάθεια. Επιπλέον, αξίζει να επανεξεταστεί η εμπειρία χρήσης CSS, η οποία μπορεί να είναι χρήσιμη για τον καθορισμό ενός νέου επιπέδου διαδραστικότητας για μια διαδικτυακή εφαρμογή.