Συνήθως, γραφικά βέλη σε ιστότοπους χρησιμοποιούνται για την οργάνωση της πλοήγησης. Όταν κάνετε κλικ σε έναν τέτοιο δείκτη, μεταβαίνετε σε άλλη σελίδα ή σε άλλη ενότητα της τρέχουσας σελίδας. Μερικές φορές ορισμένες ενέργειες συνδέονται με αυτές - επισημαίνοντας το περιεχόμενο του πεδίου ετικετών, εκκίνηση σεναρίου JavaScript κ.λπ. Για να υπογραμμίσετε ότι αυτό το βέλος είναι ενεργό στοιχείο, χρησιμοποιήστε το εφέ "highlight", δηλαδή αλλαγές στην εμφάνιση του ποντικιού.
Απαραίτητη
Βασικές γνώσεις γλωσσών HTML και CSS
Οδηγίες
Βήμα 1
Προσδιορίστε ποιος μηχανισμός για την εφαρμογή της επισήμανσης βέλους είναι ο καλύτερος για εσάς. Υπάρχουν πολλά από αυτά, δύο απλά δίνονται στα επόμενα βήματα αυτής της εντολής. Και οι δύο χρησιμοποιούν το CSS hover pseudo-class. Όταν ο δρομέας του ποντικιού είναι πάνω από ένα γραφικό στοιχείο (βέλος), εφαρμόζεται το στυλ που περιγράφεται σε αυτήν την ψευδο-κλάση και το υπόλοιπο του χρόνου αυτό το στυλ δεν είναι ενεργό. Και για τις δύο επιλογές που περιγράφονται παρακάτω, μπορείτε να χρησιμοποιήσετε τον ίδιο HTML κώδικα, αλλά διαφορετικές περιγραφές στυλ. Ο κωδικός βέλους στην πηγή της σελίδας μπορεί να γραφτεί ως εξής: Το χαρακτηριστικό id καθορίζει το αναγνωριστικό συνδέσμου (arrowA), με το οποίο το πρόγραμμα περιήγησης θα καθορίσει ποια από τις περιγραφές στυλ πρέπει να εφαρμοστεί σε αυτό.
Βήμα 2
Η πρώτη επιλογή θα σας ζητήσει να προετοιμάσετε δύο εικόνες βέλους - με και χωρίς οπίσθιο φωτισμό. Αποθηκεύστε τα σε αρχεία με ονόματα όπως arrON.
a # arrowA, a # arrowA: επισκέφθηκε {
οθόνη: μπλοκ;
ύψος: 30px;
πλάτος: 100px;
φόντο: url (arrOFF.gif) χωρίς επανάληψη.
περίγραμμα: 0;
}
a # arrowA: αιωρηθείτε {
φόντο: url (arrON.gif) χωρίς επανάληψη.
περίγραμμα: 0;
}
Το πρώτο μπλοκ περιέχει τις διαστάσεις του βέλους (ύψος: 30 εικονοστοιχεία, πλάτος: 100 εικονοστοιχεία;) - αντικαταστήστε τις με τις διαστάσεις των ετοιμασμένων εικόνων βέλους.
Βήμα 3
Η δεύτερη επιλογή σάς επιτρέπει να περάσετε μόνο με ένα αρχείο εικόνας. Πρέπει να τοποθετήσετε και τις δύο εικόνες του βέλους - τόσο επισημασμένες όσο και ανενεργές. Μπορείτε να τα τοποθετήσετε το ένα δίπλα στο άλλο, το ένα πάνω στο άλλο. Στο δείγμα κώδικα, θα υποθέσουμε ότι το επισημασμένο βέλος τοποθετείται κάτω από το ανενεργό και το αρχείο ονομάζεται arr.
a # arrowA, a # arrowA: επισκέφθηκε {
οθόνη: μπλοκ;
πλάτος: 100px;
ύψος: 30px;
φόντο: url (arr.gif) χωρίς επανάληψη.
περίγραμμα: 0;
}
a # arrowA: αιωρηθείτε {
φόντο: url (arr.gif) 31 -x χωρίς επανάληψη;
περίγραμμα: 0;
}
Μην ξεχάσετε να αλλάξετε το μέγεθος εδώ.
