Ο οπίσθιος φωτισμός των κουμπιών στις ιστοσελίδες οργανώνεται συνήθως χρησιμοποιώντας δύο εικόνες. Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το αντίστοιχο στοιχείο του εγγράφου (σύνδεσμος ή κουμπί), δημιουργείται ένα συμβάν, το οποίο, σύμφωνα με τις οδηγίες που γράφονται στη γλώσσα CSS, ζητά από το πρόγραμμα περιήγησης να αλλάξει μια εικόνα σε άλλη. Όταν ο δρομέας του ποντικιού απομακρυνθεί από το κουμπί, εμφανίζεται η αντίστροφη αντικατάσταση.
Απαραίτητη
Βασικές γνώσεις γλωσσών HTML και CSS
Οδηγίες
Βήμα 1
Υπάρχουν πολλές επιλογές για την εφαρμογή ενός τέτοιου μηχανισμού επισήμανσης. Για οποιοδήποτε από αυτά, μπορείτε να χρησιμοποιήσετε τον ίδιο κώδικα HTML, αλλάζοντας μόνο την αντίστοιχη περιγραφή στυλ. Ο κώδικας HTML του κουμπιού μπορεί να έχει την εξής μορφή: κείμενο στο κουμπί Εδώ είναι το αναγνωριστικό αυτού του στοιχείου σελίδας (id = "btnA") στο οποίο θα επισυναφθεί η περιγραφή στυλ.
Βήμα 2
Για να εφαρμόσετε μία από τις επιλογές, πρέπει να προετοιμάσετε δύο εικόνες, μία από τις οποίες δείχνει το κουμπί σε ανενεργή κατάσταση και η δεύτερη με οπίσθιο φωτισμό. Θα χρησιμοποιηθούν ως εικόνα φόντου του συνδέσμου. Οι οδηγίες CSS για αυτό το κουμπί μπορεί να έχουν την εξής μορφή:
a # btnA, a # btnA: επισκέφθηκε {
οθόνη: μπλοκ;
πλάτος: 50 εικονοστοιχεία;
ύψος: 20px;
φόντο: url (btnA.gif) χωρίς επανάληψη;
περίγραμμα: 0;
}
a # btnA: αιωρηθείτε {
φόντο: url (btnA_hover.gif) χωρίς επανάληψη;
περίγραμμα: 0;
}
Εδώ, στο πρώτο μπλοκ, εμφανίζονται οι διαστάσεις της εικόνας που απεικονίζει το κουμπί (πλάτος: 50 εικονοστοιχεία, ύψος: 20 εικονοστοιχεία;). Πρέπει να τα αντικαταστήσετε με τις διαστάσεις της εικόνας σας. Τα ονόματα των αρχείων εικόνας πρέπει να αλλάξουν με τον ίδιο τρόπο: Το btnA.
Βήμα 3
Μια εναλλακτική λύση είναι να βάλετε και τις δύο εικόνες σε μία εικόνα. Μπορεί να είναι το ένα πάνω στο άλλο ή μπορεί να είναι το ένα δίπλα στο άλλο. Θα χρησιμοποιηθεί επίσης ως φόντο του συνδέσμου. Δεδομένου ότι τα μεγέθη των κουμπιών καθορίζονται στην περιγραφή στυλ κουμπιού, οτιδήποτε δεν ταιριάζει σε αυτά δεν θα είναι ορατό. Σε αυτήν την περίπτωση, οι οδηγίες που περιλαμβάνονται στην περιγραφή CSS θα πρέπει, όταν τοποθετείτε το δείκτη του ποντικιού, να κυλήσει την εικόνα φόντου έτσι ώστε η περιοχή με την εικόνα του επισημασμένου κουμπιού να πέσει στο πλαίσιο. Για αυτήν την επιλογή, ο κωδικός από το προηγούμενο βήμα πρέπει να αλλάξει ως εξής:
a # btnA, a # btnA: επισκέφθηκε {
οθόνη: μπλοκ;
πλάτος: 50 εικονοστοιχεία;
ύψος: 20px;
φόντο: url (btnA.gif) χωρίς επανάληψη;
περίγραμμα: 0;
}
a # btnA: αιωρηθείτε {
παρασκήνιο: url (btnA.gif) χωρίς επανάληψη 21px;
περίγραμμα: 0;
}
Αυτό προϋποθέτει ότι έχετε τοποθετήσει τις εικόνες το ένα πάνω στο άλλο (επισημαίνεται στο κάτω μέρος) και έχετε αποθηκεύσει σε ένα αρχείο που ονομάζεται btnA.gif. Το ύψος των κουμπιών είναι 20 εικονοστοιχεία, το πλάτος είναι 50 εικονοστοιχεία - πρέπει να αντικαταστήσετε αυτές τις τιμές με τις δικές σας.
